JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="menuItem">
    <div class="button">
        click me
    </div>
    <div class="panel">
        <ul>
            <li>Menu item 1</li>
            <li>Menu item 2</li>
            <li>Menu item 3</li>
        </ul>
    </div>
</div>

JavaScript

/*$('.button').click(function() {

    var menuItem = $(this).parent();
    var panel = menuItem.find('.panel');

    if (menuItem.hasClass("expanded")) {
        menuItem.removeClass('expanded').addClass('collapsed');
        panel.slideUp();
    }
    else if (menuItem.hasClass("collapsed")) {
        menuItem.removeClass('collapsed').addClass('expanded');
        panel.slideDown();
    }
});*/


$('.button').click(function() {

    var menuItem = $(this).parent();
    var panel = menuItem.find('.panel');

    if (menuItem.data('collapsed')) {
        menuItem.data('collapsed', false);
        console.log(menuItem.data('collapsed', false));
        panel.slideDown();  
    }
    else {
        menuItem.data('collapsed', true);
        panel.slideUp();
    }
});