JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<ul class="radio group">
<li><input name="radio-1" type="radio" value="1">Motorbike</li>
<li><input name="radio-1" type="radio" value="2" data-toggle="expand" data-toggle-target=".container2">Car</li>
<!-- THIS IS OUR TRIGGER -->
<li><input name="radio-1" type="radio" value="3" data-toggle="expand" data-toggle-target=".container">Other</li>
</ul>

<!-- THIS SHOULD BE HIDDEN, IF NOT THEN WE SET IT TO BE HIDDEN ON PAGE LOAD -->
<div class="container">
<!-- SOME CONTEXT -->
<p>
This container should be hidden by deafult if the <strong>"data-toggle"</strong> value is <strong>"expand"</strong> and vice-versa, it should be displayed by deafult if the <strong>"data-toggle"</strong> value is <strong>"collapse"</strong>.
</p>
</div>

<!-- THIS SHOULD BE HIDDEN, IF NOT THEN WE SET IT TO BE HIDDEN ON PAGE LOAD -->
<div class="container2">
<!-- SOME CONTEXT -->
<p>
2nd container
</p>
</div>

CSS

body {
  font-family: Myriad Pro, sans-seif, arial;
  color: #333344;
  font-size: 14px;
  padding: 24px;
}

ul.radio {
  display: block;
  list-style: none;
  overflow: hidden;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color: #555577;
  padding: 0;
  margin: 0 0 8px;
}
ul.radio li {
  display: inline-block;
  float: left;
  padding: 8px;
  border-radius: 2px;
  background-color: #e8e8e8;
  margin-right: 4px;
}

.container {
  border-radius: 2px;
  min-height: 220px;
  max-width: 480px;
  border: 1px solid #dddddd;
  background-color:#ffffff;
  float: none;
  clear: both;
  padding: 24px;
  line-height: 26px;
  color: #777777;
}

.container strong {
  color: #cc2244;
  font-weight: normal;
}

JavaScript

var expand = '[data-toggle="expand"]',
        trigger = '[data-toggle-trigger]',
        target = '[data-toggle-target]',
        $expand = $(expand),
        $trigger = $(trigger),
        $target = $(target);
        
        
if ($(expand + target).length) {

  $(expand).each(function (i, e) {
    	var _$trigger = $(e),
          _$target = $(_$trigger.attr('data-toggle-target')),
          _triggerType = _$trigger.attr('type'),
          _isExpanded = _$target.hasClass('is-expanded'),
          _isCollapsed = _$target.hasClass('is-collapsed');

  
  
      // FUNCTIONS FOR EXPANDING AND COLLAPSING TARGET CONTAINER
      function expandIt(target) {
        _isCollapsed = false;
        _isExpanded = true;
        target.removeClass('is-collapsed').addClass('is-expanded');
        target.fadeIn();
      }
      function collapseIt(target) {
        _isExpanded = false;
        _isCollapsed = true;
        target.removeClass('is-expanded').addClass('is-collapsed');
        target.fadeOut();
      }
      
      // IF IS EXPANDED, MAKE IT COLLAPSE
      if (_isCollapsed == false && _isExpanded == true) {
        	collapseIt(_$target);

      // IF IS COLLAPSED, DO NOTHING
      } else if (_isCollapsed == true && _isExpanded == false) {

      // IF NIETHER, MAKE IT COLLAPSE
      } else if (_isCollapsed == false && _isExpanded == false) {
        	collapseIt(_$target);
      }
      
      
      // IF RADIO BUTTON
      if (_triggerType == 'radio') {

					$('[name="' + _$trigger.attr('name') + '"]').each(function () {
            
            if ($(this).val() != _$trigger.val())
            {
							$(this).change(function(event, source){
              	if(source != _$trigger.val())
                	if(source === undefined)
                  	_$trigger.trigger("change", _$trigger.val());
                  else  
                  	_$trigger.trigger("change", source);	
              })
            }
          });
          
        _$trigger.change(function ()...