JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<!--PANEL START -->
    <div id="panelContainer">

        <div class="panel">
            <div class="content clearfix">
                <div class="panelInner">
                    CONTENT
                </div>
            </div>
        </div>
        <div class="panel2">
            <div class="content clearfix">
                <div class="panelInner">
                    CONTENT
                </div>
            </div>
        </div>
        <!-- /login -->
        <!-- The tab on top -->
        <div class="tab">

            <ul class="login">
                <li class="toggle">
                    <a class="eaBtn open">MENU ONE</a><a style="display: none;" class="eaBtn close">CLOSE</a>
                </li>
                <li class="toggle2">
                    <a class="eaBtn open2">MENU TWO</a><a style="display: none;" class="eaBtn close2">CLOSE</a>
                </li>
            </ul>

        </div>
        <!-- / top -->
    </div>
    <!--PANEL END -->

CSS

/* sliding panel */
        #panelContainer { position: absolute; /*position: relative;*/ top: 0; width: 100%; z-index: 999; margin-left: auto; margin-right: auto; }

        .panel { width: 100%; padding: 10px 0px; color: #fff; background: #0072ae; overflow: hidden; position: relative; z-index: 3; display: none; }
        .panel2 { width: 100%; padding: 10px 0px; color: #fff; background: red; overflow: hidden; position: relative; z-index: 3; display: none; }
        .panelInner { width: 90%; margin: 0px auto; } 

        /* Panel Tab/button */
        .tab { height: 30px; position: relative; top: 0; z-index: 999; }

        .tab ul { display: block; position: relative; float:left; clear:left; height: 30px; width: auto; margin: 0; padding:0; }
        .tab ul li { margin:0; padding:0; list-style:none; display:inline-block; }

        .tab a.eaBtn { height: 30px; line-height:30px; cursor: pointer; display: block; width: 180px; text-align:center; position: relative; top:0; float:left; }

        .tab a.open { background:#0072ae; color: #fff; }
        .tab a.open2 { background: #0072ae; color: #fff; }
        .tab a.close { background:#0072ae; color: #fff; }
        .tab a.close2 { background: #0072ae; color: #fff; }

JavaScript

$(document).ready(function () {

    // Expand Panel
    $(".open").click(function () {
        $("div#panel").slideDown("slow");
    });

    // Collapse Panel
    $(".close").click(function () {
        $("div#panel").slideUp("slow");
    });

    // Expand Panel
    $(".open2").click(function () {
        $("div#panel2").slideDown("slow");
    });

    // Collapse Panel
    $(".close2").click(function () {
        $("div#panel2").slideUp("slow");
    });

    // Switch buttons
    $(".toggle a").click(function () {
        $(".toggle a").toggle();
    });

    // Switch buttons
    $(".toggle2 a").click(function () {
        $(".toggle2 a").toggle();
    });

});