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">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>

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') {

        _$trigger.change(function () {

          $('[name="' + _$trigger.attr('name') + '"]').each(function () {

            console.log($(this) != _$target);

            if ($(this) != _$target)
            {
              var _$currentTarget = $($(this).attr('data-toggle-target'));
              collapseIt(_$currentTarget);
            }

          });

          // CHECKED
          if (this.checked) {
            expandIt(_$target);

            // UNCHECKED
          } else if (!this.checked) {
           ...