JSFiddle - React, Tailwind, and code Playground

by Austen Payan

HTML

<li>
    <p class="expandable">
        <a href="#" class="expand">Item 1</a>
    </p>
    <p class="listPointSummary">This is the summary of item 1
    </p>
</li>
<li>
    <p class="expandable">
        <a href="#" class="expand">Item 2</a>
    </p>
    <p class="listPointSummary">This is the summary of item 2
    </p>
</li>
<li>
    <p class="expandable">
        <a href="#" class="expand">Item 3</a>
    </p>
    <p class="listPointSummary">This is the summary of item 3
    </p>
</li>

JavaScript

$(document).ready(function(){

    var $summaries = $(".listPointSummary");
    
    function showSummary() {
        $summaries.each(function(){
            if( $(this).hasClass('active') ) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
    
    $summaries.hide();
    
     $(".expandable").click(function() {
            $summaries.removeClass('active');
            $(this).next().addClass('active');
            showSummary();
    });
    
});