JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

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

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

CSS

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

.js .collapsed p { display: none; }
.js .collapsed.expanded p { display: block; }

JavaScript

document.documentElement.className += " js";

jQuery(document).ready(function( $ ) {
    
    $( document ).delegate( ".collapsed", "click", function (e) {
        var $this    = $( this ), 
            expanded = $this.hasClass( "expanded" ), 
            href;
        
        e.preventDefault(); // In case they click directly on the <a> tag
        
        if ( !expanded ) {
            $this.addClass( "expanded" );
        } else {
            href = $this.children().eq( 0 ).find( "a" ).attr( "href" );
            window.location = href;
        }
    });
});