JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span></strong><br><br></p>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
    <br />
    <br />
    Julie Thomas // 425.881.6185</span><br />
    </strong>
</div>
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span></strong><br><br></p>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
    <br />
    <br />
    Julie Thomas // 425.881.6185</span><br /></strong></div>
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span></strong><br><br></p>
<div class="accord_panel"><strong><span>In partnership with Agros, Int'l since 2001, UPC has come alongside this rural village to encourage them as they move toward economic self-sufficiency. &nbsp;Most importantly we send service teams in January and July to renew friendships, share the love and gospel of Jesus Christ and participate in village activities.<br />
    <br />
    <br />
    Julie Thomas // 425.881.6185</span><br />
    </strong>
</div>
<p style="text-align: -webkit-auto;" class="accord_header"><strong><span>+ El Salvador/San Diego de Tenango Task Force</span></strong><br><br></p>
<div class="accord_panel"><strong><span>In...

CSS

p.accord_header
{
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
    color: #615E5A;
    font-size: 9pt;
    font-weight: bold;
    background-color: #e3e0dd
}
div.accord_panel
{
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue' , Helvetica, Arial, Sans-Serif;
    color: #615E5A;
    font-size: 9pt;
    display: none;
    background-color: #f3f0ed
}

JavaScript

$("div.accord_panel").hide();
$("p.accord_header").click(function(e) {
    $("div.accord_panel").stop(true, false).slideUp();
    $(e.target).closest('p').next('.accord_panel').stop(true, false).slideDown();
});