JSFiddle - React, Tailwind, and code Playground

by bmscmoreira

HTML

<div id="wrapper">
    <div id="menu-items">
        <ul class="accordion">
            <li>
                <p>MENU1</p>
            </li>
            <li class="info">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum bibendum sollicitudin. Nullam quis augue ultricies, placerat diam eu, porttitor purus. Nullam elementum vestibulum placerat. In mi nisi, consequat nec posuere eu, sodales et enim. Phasellus mollis velit at nibh malesuada, ut semper justo congue. Integer viverra tincidunt sapien quis fermentum. Vestibulum sed molestie quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis nisi facilisis, luctus tortor sed, tincidunt risus. Morbi faucibus eros et bibendum vehicula. Vestibulum imperdiet ut neque mattis elementum. Fusce eleifend ultrices egestas. Sed sed volutpat orci, at vestibulum tortor. Duis et dolor dictum, consequat elit nec, tristique urna. Pellentesque id ligula dolor. Duis pellentesque fringilla faucibus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum bibendum sollicitudin. Nullam quis augue ultricies, placerat diam eu, porttitor purus. Nullam elementum vestibulum placerat. In mi nisi, consequat nec posuere eu, sodales et enim. Phasellus mollis velit at nibh malesuada, ut semper justo congue. Integer viverra tincidunt sapien quis fermentum. Vestibulum sed molestie quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus quis nisi facilisis, luctus tortor sed, tincidunt risus. Morbi faucibus eros et bibendum vehicula. Vestibulum imperdiet ut neque mattis elementum. Fusce eleifend ultrices egestas. Sed sed volutpat orci, at vestibulum tortor. Duis et dolor dictum, consequat elit nec, tristique urna. Pellentesque id ligula dolor. Duis pellentesque fringilla faucibus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque...

CSS

body {
    margin:0;
    padding:0;
    height:100%;
}
#menu-items {
    min-height:100%;
    position:relative;
    margin-left:55px;
    margin-top:75px;
    padding-bottom:40px;
}
#footer {
    height:40px;
    position:absolute;
    bottom:20px;
    left:20px;
}

JavaScript

$('.accordion > .info').hide();
$('.accordion > li > p').click(function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        $(this).parent().next().slideUp();
    } else {
        $('.accordion > li > p').removeClass('selected');
        $(this).addClass('selected');
        $('.accordion > .info').slideUp();
        $(this).parent().next().slideDown();
    }
    return false;
});