JSFiddle - React, Tailwind, and code Playground

by LCfiddle

HTML

<div class="verticalaccordion">



  <ul>
    <li>

      <h9>SECTION 1</h9>
      <div>12345</div>
    </li>
    <li>
      <h9>SECTION 2</h9>
      <div>6789</div>
    </li>
  </ul>
</div>

CSS

.verticalaccordion>ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 845px;
}

.verticalaccordion>ul>li {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 46px;
  width: 845px;
  /* Decorative CSS */
  background-color: #;
  /* CSS3 Transition Effect */
  transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
}

.verticalaccordion>ul>li>h9 {
  display: block;
  margin: 0;
  padding: 10px 645px 10px 0px;
  height: 25px;
  text-align: right;
  /* Decorative CSS */
  border-top: # 1px solid;
  font-family: HelveticaNeue, sans-serif;
  font-weight: lighter;
  font-size: 19px;
  text-decoration: none;
  text-transform: ;
  color: #000000;
  background: #;
  /* CSS3 Gradient Effect */
  background: -moz-linear-gradient( top, #, #);
  background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#);
  /* IE 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#)";
  /* IE 8 */
}

h6 {
  line-height: 6px;
}

.verticalaccordion>ul>li>div {
  margin: 0px 0px 0px 0px;
  overflow: auto;
  padding: 0px 0px 0px 208px;
  height: 520px;
  font-family: HelveticaNeue, sans-serif;
  font-size: 19px;
  color: #333333;
}

.verticalaccordion>ul>li:hover {
  height: 380px;
}

.verticalaccordion:hover>ul>li:hover>h9 {
  /* Decorative CSS */
  color: #;
  background: #;
  /* CSS3 Gradient Effect */
  background: -moz-linear-gradient( top, #, #);
  /* FF, Flock */
  background: -webkit-gradient(linear, left top, left bottom, from(#), to(#));
  /* Safari, Chrome */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#);
  /* IE 5.5 - IE 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#, endColorstr=#)";
  /* IE 8...

JavaScript

$(function() {
  $('#verticalaccordion').verticalaccordion({
    active: 0
  });
});