JSFiddle - React, Tailwind, and code Playground

by LCfiddle

HTML

<div class="verticalaccordion">First Title</div>
    <p class="content open">First paragraph. (initially visible)</p>
<div class="verticalaccordion">Second Title</div>
    <p class="content">Second paragraph. (initially hidden)</p>

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

$(".verticalaccordion").hover(function() {
    $(this).next().toggle();
});