JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="bar">Title Bar</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde cupiditate dignissimos hic quasi itaque cumque quia molestiae eligendi nihil atque. Eveniet natus labore facere suscipit veritatis omnis ratione consequatur nihil.</p>
</div>
<div class="bar">Title Bar</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde cupiditate dignissimos hic quasi itaque cumque quia molestiae eligendi nihil atque. Eveniet natus labore facere suscipit veritatis omnis ratione consequatur nihil.</p>
</div>
<div class="bar">Title Bar</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde cupiditate dignissimos hic quasi itaque cumque quia molestiae eligendi nihil atque. Eveniet natus labore facere suscipit veritatis omnis ratione consequatur nihil.</p>
</div>
<div class="bar">Title Bar</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde cupiditate dignissimos hic quasi itaque cumque quia molestiae eligendi nihil atque. Eveniet natus labore facere suscipit veritatis omnis ratione consequatur nihil.</p>
</div>
<div class="bar">Title Bar</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde cupiditate dignissimos hic quasi itaque cumque quia molestiae eligendi nihil atque. Eveniet natus labore facere suscipit veritatis omnis ratione consequatur nihil.</p>
</div>

CSS

div {
    margin: 0;
    padding:0;
    background:#e3e3e3;
    padding:15px;
    display:none;
}

.bar {
    display:block;
    background: #999;    
    color:white;
}

JavaScript

$('.bar').click(function(){
    $('.openSection').slideUp(500).removeClass('openSection');
     $(this).next('div').addClass('openSection').slideToggle(500);
});

$('.bar').each(function(i){
    $(this).css('background', "url(http://www.hhhhold.com/"+ (500 + i) +")")
})