JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div id="dd_bl">
	<div data-handler>Push me</div>
	
	<div data-dd>
        <ol>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ol>
	</div>
</div>


<div id="dd_bl2">
	<div data-handler>Push me2</div>
	
	<div data-dd>
        <ol>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ol>
	</div>
</div>

CSS

div[data-handler] {
    background: tan;
    width: 80px;
}

div[data-dd] {
    display: none;
    background: olive;
    width: 200px;
}

.open_dd {
    display: block !important;
}

JavaScript

(function($) {
	'use strict';

	$.fn.ddOZ = function() {
        //console.log(this);
		var handler = this.find('[data-handler]');
		var dd = this.find('[data-dd]');

		handler.on('click', function(e) {
            e.stopPropagation();

			if(dd.hasClass('open_dd')) {
                console.log(1);
				dd.removeClass('open_dd');
				$(document).off('click', closeDd);
			} else {
				dd.addClass('open_dd');
                $(document).on('click', closeDd);
			}

		});
        
        $(document).on('click', closeDd);

		function closeDd() {
			dd.removeClass('open_dd');
		}

		dd.on('click', function(e) { e.stopPropagation(); });
	}

})(jQuery);

$('#dd_bl').ddOZ();
$('#dd_bl2').ddOZ();