JSFiddle - React, Tailwind, and code Playground

HTML

<div class="collapse">     
    <h2><a href="http://slashdot.org">Test Title</a></h2>
    <p>Summary content</p>    
</div>
<div class="collapse">    
    <h2><a href="http://slashdot.org">Test Title2</a></h2>    
    <p>Summary content2</p>    
</div>

CSS

.expand, .collapse {
    background-color: #f0f0f0;
    padding: 0px;    
}
.expand h2, .collapse h2{
    border-style:solid;
    border-width:thin;
    cursor:pointer;
    background-color: #d0d0d0;
    padding: 6px;
}
.expand h2 a, .collapse h2 a {
    text-decoration: none;
    color: black;    
}

.collapse p {
    display:none;   
}

.expand p {
    display:block;   
}

JavaScript

$(document).ready(function(){
    $('.collapse, .collapse a').live('click',function(e){
       e.preventDefault();
       $(this).unbind('click')
           .removeClass('collapse')
           .addClass('expand');
    }) 
});