JSFiddle - React, Tailwind, and code Playground
HTML
<DIV class=PLACE id=PLACE1 title=tabs>
<UL class=tabs>
<LI>
<A href="#tabone">General Information</A>
</LI>
<LI>
<A href="#tabtwo">Rentals</A>
</LI>
<LI>
<A href="#tabthree">Referrals</A>
</LI>
</UL>
</DIV>
<DIV class=pane id=tabone>
<DIV class=PLACE id=PLACE2 title=tabone >
<P>
<ul class="sys_expandable">
<li class="sys_expandableContainer">
<h3>
<a href="#">Health Partners</a>
</h3>
<div class="sys_section">
<p>
Health Partners will take steps...
</p>
</div>
</li>
</ul>
<ul class="sys_expandable">
<li class="sys_expandableContainer">
<h3>
<a href="#">East Wing external refurbishment</a>
</h3>
<div class="sys_section">
<p>
The East Wing has been a ....
</p>
</div>
</li>
</ul>
</P>
</DIV>
</DIV>
<DIV class=pane id=tabtwo>
<DIV class=PLACE id=PLACE3 title=tabtwo>
<P>
Tab two
</P>
</DIV>
</DIV>
<DIV class=pane id=tabthree>
<DIV class=PLACE id=PLACE4 title=tabthree >
<P>
Tab three
</P>
</DIV>
</DIV>
CSS
.sys_expandable li h3 a { color: red; }
.sys_expandable { padding-top: 20px; }
JavaScript
$('.sys_expandable li h3 a').click(function() {
if ($(this).parent().parent().hasClass('active')) {
$(this).parent().parent().removeClass('active').find('div.sys_section').slideUp(200);
} else {
$(this).parent().parent().addClass('active').find('div.sys_section').slideDown(200);
}
return false;
});