JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<section id="content">

    <ul class="drop-group">
        <li>
            <div class="in-block select-drop smooth">
                <a href="#" title="Select Drug Name">Select Drug Name</a>
                <ul class="drop-view">
                    <li><a href="#">Cocaine</a></li>
                    <li><a href="#">Lee Bob</a></li>
                    <li><a href="#">Paco Paco</a></li>
                    <li><a href="#">Ecstacy</a></li>
                    <li><a href="#">Herbals</a></li>
                </ul><!--end .drop-view-->
            </div><!--end .select-drop-->
        </li>
        <li>
            <div class="in-block select-drop smooth">
                <a href="#" title="Select Drug Group">Select Drug Group</a>
                <ul class="drop-view">
                    <li><a href="#">Meeting Drugs</a></li>
                    <li><a href="#">Party Drugs</a></li>
                    <li><a href="#">Sunday Drugs</a></li>
                    <li><a href="#">Example Drugs</a></li>
                    <li><a href="#">Drugs Drugs</a></li>
                </ul><!--end .drop-view-->
            </div><!--end .select-drop-->
        </li>
        <li>
            <div class="in-block select-drop smooth">
                <a href="#" title="Select Something Else">Select Something Else</a>
                <ul class="drop-view">
                    <li><a href="#">Random Selection</a></li>
                    <li><a href="#">Random Selection</a></li>
                    <li><a href="#">Random Selection</a></li>
                    <li><a href="#">Random Selection</a></li>
                    <li><a href="#">Random Selection</a></li>
                </ul><!--end .drop-view-->
            </div><!--end .select-drop-->
        </li>
    </ul><!--end .drop-group-->
    
    <p>In a nisl purus. Morbi ligula lectus, dignissim at feugiat at, porta id est. Cras posuere ultricies ante, sed pellentesque erat varius molestie. Donec nec lectus mi. Aenean a est id est...

CSS

/* Base */
body { background: #f8f8f8; }
* { vertical-align: text-top; }

/* Global Classes */
.in-block { display: inline-block; *display: inline; zoom: 1; }
.smooth { -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; transition: all .5s linear; }

/* Drop Down Group // Discard if only 1 DropDown in vertical order */
.drop-group { margin: 12px 0 0 0; padding: 0; width: 207px; }
.drop-group li { display: block; list-style: none; margin: 0 0 12px 0; padding: 0; position: relative; z-index: 1; }

.drop-group li:hover, 
.drop-group li.active { z-index: 2; }

.drop-group li:last-child { margin-bottom: 0; }

/* Select Drop Down */
.select-drop { background: #fff...

JavaScript

//Define
var _content = $('#content');
var _selectDrop = _content.find('.select-drop');

//Close on Content DBLClick
_content.dblclick(function(event){

    _selectDrop
        .removeClass('active')
            .parent()
            .removeClass('active');

    event.preventDefault();
    
});

//Activate on Button Click
_selectDrop.click(function(){

    $(this)
        .toggleClass('active')
            .parent()
            .toggleClass('active');
  
});