You are here

Home » API reference » Examples for Developers 3.x

accordion.css in Examples for Developers 3.x 

.accordionWrapper {
  background: #fff;
  float: left;
  width: 80%;
  box-sizing: border-box;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
}
.accordionItem {
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Open-sans',Arial,sans-serif;
}
.accordionItemHeading {
  cursor: pointer;
  margin: 0 0 10px 0;
  padding: 10px;
  background: #2980b9;
  color: #fff;
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
}
.close .accordionItemContent {
  height: 0;
  transition: height 1s ease-out;
  -webkit-transform: scaleY(0);
  -o-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
  float: left;
  display: block;
}
.open .accordionItemContent {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  width: 100%;
  display: block;
  -webkit-transform: scaleY(1);
  -o-transform: scaleY(1);
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: top;
  -o-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: -webkit-transform 0.4s ease-out;
  -o-transition: -o-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  transition: transform 0.4s ease;
  box-sizing: border-box;
}

.open .accordionItemHeading {
  margin: 0;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #08447a;
  color: #ffffff;
}

File

modules/js_example/css/accordion.css
View source 
  1. .accordionWrapper {

  2.   background: #fff;

  3.   float: left;

  4.   width: 80%;

  5.   box-sizing: border-box;

  6.   box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);

  7. }

  8. .accordionItem {

  9.   float: left;

  10.   display: block;

  11.   width: 100%;

  12.   box-sizing: border-box;

  13.   font-family: 'Open-sans',Arial,sans-serif;

  14. }

  15. .accordionItemHeading {

  16.   cursor: pointer;

  17.   margin: 0 0 10px 0;

  18.   padding: 10px;

  19.   background: #2980b9;

  20.   color: #fff;

  21.   width: 100%;

  22.   -webkit-border-radius: 3px;

  23.   -moz-border-radius: 3px;

  24.   border-radius: 3px;

  25.   box-sizing: border-box;

  26. }

  27. .close .accordionItemContent {

  28.   height: 0;

  29.   transition: height 1s ease-out;

  30.   -webkit-transform: scaleY(0);

  31.   -o-transform: scaleY(0);

  32.   -ms-transform: scaleY(0);

  33.   transform: scaleY(0);

  34.   float: left;

  35.   display: block;

  36. }

  37. .open .accordionItemContent {

  38.   padding: 20px;

  39.   background-color: #fff;

  40.   border: 1px solid #ddd;

  41.   width: 100%;

  42.   display: block;

  43.   -webkit-transform: scaleY(1);

  44.   -o-transform: scaleY(1);

  45.   -ms-transform: scaleY(1);

  46.   transform: scaleY(1);

  47.   -webkit-transform-origin: top;

  48.   -o-transform-origin: top;

  49.   -ms-transform-origin: top;

  50.   transform-origin: top;

  51.   -webkit-transition: -webkit-transform 0.4s ease-out;

  52.   -o-transition: -o-transform 0.4s ease;

  53.   -ms-transition: -ms-transform 0.4s ease;

  54.   transition: transform 0.4s ease;

  55.   box-sizing: border-box;

  56. }

  57. 

  58. .open .accordionItemHeading {

  59.   margin: 0;

  60.   -webkit-border-top-left-radius: 3px;

  61.   -webkit-border-top-right-radius: 3px;

  62.   -moz-border-radius-topleft: 3px;

  63.   -moz-border-radius-topright: 3px;

  64.   border-top-left-radius: 3px;

  65.   border-top-right-radius: 3px;

  66.   -webkit-border-bottom-right-radius: 0;

  67.   -webkit-border-bottom-left-radius: 0;

  68.   -moz-border-radius-bottomright: 0;

  69.   -moz-border-radius-bottomleft: 0;

  70.   border-bottom-right-radius: 0;

  71.   border-bottom-left-radius: 0;

  72.   background-color: #08447a;

  73.   color: #ffffff;

  74. }