JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div id="accordion">
<h4>1st Paragraph</h4>
<div><b>1st content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</div>
<h4>2nd Paragraph</h4>
<div><b>2nd content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</div>
<h4>3rd Paragraph</h4>
<div><b>3rd content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</div>
<h4>4th Paragraph</h4>
<div><b>4th content</b> Porttitor amet sagittis tortor rhoncus hac habitasse porta nisi augue vut? Tortor sed montes, mattis a amet velit magna. Turpis etiam dignissim pid, porta elit, phasellus elementum</div>
</div>

CSS

h4 {border:1px solid blue; background-color:#EAEAEA;cursor:pointer;margin:0px;}

JavaScript

$('#accordion div:not(:first)').hide();
$('h4').click(function() {
    $(this).next().slideToggle();
    $('h4').not(this).next().slideUp();
});