JSFiddle - React, Tailwind, and code Playground

by bnickel

HTML

<meta name="viewport" content="width=device-width">
<ul>
    <li>
        <div role="button">Expand or collapse</div>
        <p>Body... Body... Body...</p>
    </li>
    <li>
        <div role="button">Expand or collapse</div>
        <p>Body... Body... Body...</p>
    </li>
    <li>
        <div role="button">Expand or collapse</div>
        <p>Body... Body... Body...</p>
    </li>
</ul>

JavaScript

$(function () {

    $('div[role="button"]').each(function () {
        var $button = $(this);
        var $body = $button.siblings();
        var visible = true;
        
        $button.bind('click', function () {
            visible = !visible;
            
            $body.toggle(visible);
            return;
            if (visible) {
                $body.css({
                    height: 'auto',
                    visibility: 'visible'
                });
            } else {
                $body.css({
                    height: '0',
                    visibility: 'hidden'
                });
            }
            
        });
    });
});