JSFiddle - React, Tailwind, and code Playground

by Ruben Hernandez

HTML

<div id="test">
    <ul>
        <li id="LI_1">	 
            <label id="LABEL_2">
                <button type="button" id="BUTTON_3">
                    Formato
                </button>
            </label>
            <div id="DIV_4">
                <ul id="UL_5">
                    <li id="LI_6">
                        3D
                    </li>
                    <li id="LI_7">
                        Blu-RayDisc
                    </li>
                    <li id="LI_8">
                        DVD
                    </li>
                </ul>
                <span id="SPAN_9">Close</span><span id="SPAN_10"></span>
            </div>
            <div id="DIV_11">
            </div>
        </li>
    </ul>
</div>
<div>
   More Text 
</div>

CSS

#LI_1 {
    box-sizing: border-box;
    color: rgb(102, 102, 102);
    float: left;    
    position: relative;
    width: 100%;
    perspective-origin: 74.078125px 92.5px;
    transform-origin: 74.078125px 92.5px;
    border: 0px none rgb(102, 102, 102);
    font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 10px;
    outline: rgb(102, 102, 102) none 0px;
    overflow: hidden;
    padding: 0px 3px 0px 0px;
}
/*#LI_1*/
 #LABEL_2 {
    color: rgb(102, 102, 102);
    cursor: pointer;
    display: block;
    height: 28px;
    text-align: left;
    width: 145.15625px;
    perspective-origin: 72.578125px 14px;
    transform-origin: 72.578125px 14px;
    border: 0px none rgb(102, 102, 102);
    font: normal normal bold normal 13px/16.8999996185303px Helvetica, Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 10px;
    outline: rgb(102, 102, 102) none 0px;
}
/*#LABEL_2*/
 #BUTTON_3 {
    color: rgb(204, 204, 204);
    cursor: pointer;
    height: 28px;
    text-transform: uppercase;
    vertical-align: middle;
    width: 67.609375px;
    perspective-origin: 33.796875px 14px;
    transform-origin: 33.796875px 14px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
    list-style: none outside none;
    margin: 0px 0px 0px 5px;
    outline: rgb(204, 204, 204) none 0px;
    overflow: hidden;
    padding: 3px 5px;
}
/*#BUTTON_3*/
 #DIV_4 {     
    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 3px 0px;
    box-sizing: border-box;
    color: rgb(102, 102, 102);    
    position: relative;
    text-align: left;
    width: 130.640625px;
    perspective-origin: 65.3125px 71px;
    transform-origin: 65.3125px 71px;
    background: rgb(253, 251, 228) none repeat scroll 0% 0% / auto...

JavaScript

$(document).ready(function(){
    $('#LABEL_2').on('click', function(element){        
        $('#DIV_4').toggle();
    })
});