accordion.css

Same filename in other branches
  1. 3.x modules/js_example/css/accordion.css
  2. 8.x-1.x js_example/css/accordion.css
.accordion-wrapper {
  padding: 30px;
  background: #fff;
  float: left;
  width: 80%;
  box-sizing: border-box;
  margin: 10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
}

.accordion-item {
  float: left;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Open-sans", Arial, sans-serif;
}

.accordion-item-header {
  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 .accordion-item-content {
  height: 0px;
  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 .accordion-item-content {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  width: 100%;
  margin: 0 0 10px 0;
  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 .accordion-item-header {
  margin: 0;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  background-color: #bdc3c7;
  color: #7f8c8d;
}

File

modules/js_example/css/accordion.css

View source 
  1. .accordion-wrapper {

  2.   padding: 30px;

  3.   background: #fff;

  4.   float: left;

  5.   width: 80%;

  6.   box-sizing: border-box;

  7.   margin: 10%;

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

  9. }

  10. 

  11. .accordion-item {

  12.   float: left;

  13.   display: block;

  14.   width: 100%;

  15.   box-sizing: border-box;

  16.   font-family: "Open-sans", Arial, sans-serif;

  17. }

  18. 

  19. .accordion-item-header {

  20.   cursor: pointer;

  21.   margin: 0 0 10px 0;

  22.   padding: 10px;

  23.   background: #2980b9;

  24.   color: #fff;

  25.   width: 100%;

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

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

  28.   border-radius: 3px;

  29.   box-sizing: border-box;

  30. }

  31. 

  32. .close .accordion-item-content {

  33.   height: 0px;

  34.   transition: height 1s ease-out;

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

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

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

  38.   transform: scaleY(0);

  39.   float: left;

  40.   display: block;

  41. }

  42. 

  43. .open .accordion-item-content {

  44.   padding: 20px;

  45.   background-color: #fff;

  46.   border: 1px solid #ddd;

  47.   width: 100%;

  48.   margin: 0 0 10px 0;

  49.   display: block;

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

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

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

  53.   transform: scaleY(1);

  54.   -webkit-transform-origin: top;

  55.   -o-transform-origin: top;

  56.   -ms-transform-origin: top;

  57.   transform-origin: top;

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

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

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

  61.   transition: transform 0.4s ease;

  62.   box-sizing: border-box;

  63. }

  64. 

  65. .open .accordion-item-header {

  66.   margin: 0;

  67.   -webkit-border-radius: 3px 3px 0 0;

  68.   -moz-border-radius: 3px 3px 0 0;

  69.   border-radius: 3px 3px 0 0;

  70.   background-color: #bdc3c7;

  71.   color: #7f8c8d;

  72. }