JSFiddle - React, Tailwind, and code Playground

by LCfiddle

HTML

<div class="title">TITLE 1</div>
<p class="content open">Text 1
<br /><br />
Text 2
<br /><br />
Text 3
<br /><br />
Text 4
<br /><br />
Text 5
<br /><br />
Text 6
<br /><br />
Text 7</p>
<div class="title">TITLE 2</div>
<p class="content">Text 1<br />
text continued
<br /><br />
Text 2<br />
text continued
<br /><br />
Text 3
<br />text continued</p>

CSS

.content {
  display: none;
  list-style: none;
  width: 845px;
  font-size: 19px;
  font-family: HelveticaNeue, sans-serif;
  font-weight: lighter; 
  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;
}

.content.open {
  display: block;
  width: 645px;
  font-family: HelveticaNeue, sans-serif;
  font-weight: lighter;
  font-size: 19px;
  text-decoration: none;
  color: #333333;
  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;
}

.title {
  cursor: pointer;
  font-family: HelveticaNeue, sans-serif;
  font-weight: lighter;
  font-size: 19px;
  text-decoration: none;
  color: #000000;
  padding: 10px 645px 0px 0px;
  text-align: right;
  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;
}

JavaScript

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