JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="wrap">
<div class="toggler" data-controller="TogglerCtrl" data-alert="1">toggler 1</div>
<div class="drop">drop</div>
</div>

<div class="wrap">
<div class="toggler" data-controller="TogglerCtrl" data-alert="2">toggler 2</div>
<div class="list">drop</div>
</div>

CSS

.toggler {
  cursor: pointer;
}

.drop {
  display: none;
  background: blue;
}

.open > .drop {
  display: block;
}

.list {
  display: none;
  background: red;
}

.open > .list {
  display: inline;
}

JavaScript

// Auto instantiate
(function ($) {
    $.fn.Instantiate = function () {
        return this.each(function () {
            var $self = $(this);
            var $controller = $self.attr('data-controller');
            if ($self[$controller]) {
                var params = $self.data();
                $self[$controller](params);
            }
        });
    };
})(jQuery);
// Toggler Controller
(function($){
	$.fn.TogglerCtrl = function (params) {
  	return this.each(function(){
    	var $self = $(this),
      	$target = $self.parent();
      $self.click(function(){      	
      	$target.toggleClass('open');
        // alert(params.alert);
      });
    });
  };
})(jQuery);
// Initialize
jQuery(function($){	
  $('[data-controller]').Instantiate();  
});