JSFiddle - React, Tailwind, and code Playground

by tomgrohl

HTML

<div class="article" id="onea">
         <h1>test2</h1>
         <p class="subtitle">ccccc</p>
         <p class="number">1a</p>
         </div>


         <p class="detail" style="display:none;">ddddd</p>


<div class="article" id="oneb">
         <h1>test2</h1>
         <p class="subtitle">ccccc</p>
         <p class="number">1a</p>
         </div>


         <p class="detail" style="display:none;">ddddd</p>

CSS

.article{
 border: 1px solid #cc0000;   
}

.detail{
 border: 1px solid #00cc00;  
}

JavaScript

$('div.article').click(function() {
        var $this = $(this);     
        $('div.article').fadeOut(450, function(){
             $this.next('p.detail').fadeIn(750)
        });     

});