JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div class="select_container">
   <h3 class="reset">Select Items</h3>
   <ul class="select_elements">
      <li>Select Item 01</li>
      <li>Select Item 02</li>
      <li>Select Item 03</li>
   </ul>
</div>

JavaScript

var selectFields = {
        init: function(){
           $(document).bind('click',function(e){
		      if( !$('ul').hasClass('active')){
				 $('ul').hide()
				 $(this).find('ul.select_elements').toggleClass('active');	   
                 }
            }); 
			
           $('.select_container').on('click',function(e){
			     e.stopPropagation()
				 if( $('ul').hasClass('active')){
				 $('ul').show()
                 }else{ $('ul').hide()   }
                 $(this).find('ul.select_elements').toggleClass('active');
            });
			
			$('.select_elements').on('click',function(e){
				e.stopPropagation()
				})

        }
    };

    $(selectFields.init);