JSFiddle - React, Tailwind, and code Playground
HTML
<div class="accordian">
<div class="item">
<div class="title">
<h3>First title</h3>
</div>
<div class="content">
<p>Normally, both your asses would be dead as fucking fried chicken.</p>
</div>
</div>
<div class="item">
<div class="title">
<h3>Second title</h3>
</div>
<div class="content">
<p>Normally, both your asses would be dead as fucking fried chicken.</p>
</div>
</div>
<div class="item">
<div class="title">
<h3>Third title</h3>
</div>
<div class="content">
<p>Normally, both your asses would be dead as fucking fried chicken.</p>
</div>
</div>
</div>
CSS
* { margin: 0; padding: 0; font: normal 12px/20px Helvetica-Neue,Helvetica,Arial; }
.accordian .item {
margin-top: -1px;
}
.accordian .title {
padding: 6px 10px;
background: #eee;
border: 1px solid #ddd;
color: #666;
font-size: 16px;
cursor:pointer;
}
.accordian .title.active {
color: #000;
}
.accordian .content {
padding: 4px 10px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.accordian .item:last-child .content {
border-bottom: 1px solid #ddd;
}
JavaScript
$(function() {
// no need to put $('.accordian') in cache because we use it only once
// putting it in cache is using a memory storage for nothing
$('.accordian').each(function() {
var item = $(this).children(),
content = item.find(' > .content'),
title = item.find(' > .title');
content.hide().eq(0).show().prev('.title').addClass('active');
title.click(function() {
if(!$(this).hasClass('active')) {
title.removeClass('active');
$(this).addClass('active');
content.stop(true,true).slideUp(200);
$(this).next().stop(true,true).slideDown(200);
}
});
});
});