JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<div style="float:left">
    <div id="firstpane" class="menu_list">
        <p id="haut"></p>
        <p class="menu_head">Header-1<span>+</span>

        </p>
        <div class="menu_body"> <a href="#">Link-1</a>	 <a href="#">Link-2</a>	 <a href="#">Link-3</a>	
        </div>
        <p class="menu_head">Header-2<span>+</span>

        </p>
        <div class="menu_body"> <a href="#">Link-1</a>	 <a href="#">Link-2</a>	 <a href="#">Link-3</a>	
        </div>
        <p class="menu_head">Header-3<span>+</span>

        </p>
        <div class="menu_body"> <a href="#">Link-1</a>	 <a href="#">Link-2</a>	 <a href="#">Link-3</a>	
        </div>
        <p id="bas"></p>
    </div>
</div>

CSS

#firstpane p span {
    padding:1px 9px 2px 9px;
    position:relative;
    float:right;
    font-weight:bold;
}
body {
    margin: 10px auto;
    font: 75%/120% Verdana, Arial, Helvetica, sans-serif;
    background-color: #6699CC;
}
#haut {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-right: 6px groove;
    border-left: 6px groove;
    border-top: 6px groove;
    border-color: #0052CC;
    padding: 5px;
    margin: 0px;
    background-color: #C2EBFF;
}
#bas {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right: 6px groove;
    border-left: 6px groove;
    border-bottom: 6px groove;
    border-color: #0052CC;
    padding: 5px;
    margin: 0px;
    background-color: #C2EBFF;
    background-size:0px 0px;
}
.menu_list {
    width: 150px;
}
.menu_head {
    border-right: 6px groove;
    border-left: 6px groove;
    border-color: #0052CC;
    color:#336680;
    padding: 8px;
    cursor: pointer;
    position: relative;
    margin:0px;
    font-weight:bold;
    background-color: #C2EBFF;
}
.menu_body {
    display:none;
    border-right: 6px groove;
    border-left: 6px groove;
    border-color: #006699;
}
.menu_body a {
    display:block;
    color:#66ccff;
    background-color:#194775;
    padding-left:10px;
    font-weight:bold;
    text-decoration:none;
}
.menu_body a:hover {
    display:block;
    color:#A3E0FF;
    background-color:#4D7094;
    padding-left:10px;
    font-weight:bold;
    text-decoration:none;
}

JavaScript

$(document).ready(function () {

     $(".menu_head").bind({

         click: function () {
             $(".menu_head").find('span').html('+');
             $(this).siblings("div.menu_body").slideUp("slow");
             $(this).next().slideDown();
             $(this).find('span').html('-');
         }
     });
 });