JSFiddle - React, Tailwind, and code Playground

by shaneblake

HTML

<div id="menus">    
    <ul id="menu_list">        
        <li data-name="menu1">The Wake Up Call</li>
        <li data-name="menu2">Menu_2</li>
        <li data-name="menu3">Menu_3</li>
    </ul>    
    
    <div id="accordion">        
        
        <dl id="menu1">            <dt>                <h3>Menu 1 Item 1</h3>            </dt>            <dd>                <p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>            </dd>        </dl>
            <dl id="menu2">            <dt>                <h3>Menu 2 Item 1</h3>            </dt>            <dd>                <p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>            </dd>        </dl>        
            <dl id="menu3">            <dt>                <h3>Menu 3 Item 1</h3>            </dt>            <dd>                <p>Quisque scelerisque scel nisl at pellentesque. Quisque scelerisque scel nisl at pellentesque.</p>            </dd>        </dl>    
            
        </div></div>

JavaScript

$("#accordion dl:not(:first-child)").hide();

$("#menu_list li").click(function() {
    var selected = $(this).data('name');
    $('#' + selected).show('slow').siblings().hide('slow');
    
});