JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

My Select Menu


    <div class="dsm-settingslabel" for="dsm-settings"> Settings 

    <div class="dsm-settingswrap">hello</div>
</div>

CSS

#dsm-settings{
    position:absolute;
    left:-9999px;
}
.dsm-settingslabel {
    vertical-align: top;
    background-color:#ccc;
    width:100%;
    height:50px;
    display:inline-block;
    border-radius:3px;
    cursor:pointer;
    transition:all 0.5s ease-in;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;
}
.dsm-settingswrap {
    background-color:black;
    height:0px;
    transition:all 0.5s ease-in;
  
   
}
.dsm-settings:checked + .dsm-settingswrap {
   height:100px;
}

JavaScript

$( document ).ready(function() {
	$( ".dsm-settingslabel" ).click(function() {	
		var settingswrap = $( this ).find( ".dsm-settingswrap" );
		$( ".dsm-settingswrap" ).not( settingswrap ).hide();		
		$( settingswrap ).slideToggle();
	});
});