使用基于已选中/未选中的单选按钮的自定义数据属性显示/隐藏容器

Question

Please take a look at the diagram above first.

The purpose of this task is to be able to show/hide a container using custom data-attribute and whether a radio button is check/unchecked.

So here is how we use it;

<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 -->
</div>

The code above showcases how do we use the custom data-attribute within our HTML markup to perform this, and it works when you click on the desired radio button, but when clicking on other radio buttons, the active one should be unchecked as we have clicked on the other radio buttons, and then the container should be displayed out, but it's not fully working.

Please take a look at my jsFiddle version!

Any help is greatly appreciated :)

Answer 1

Here is a solution...

https://jsfiddle.net/Farzad/xtwquh7a/

And here is partial of the entire code that has changed;

// 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 () {
      // CHECKED
      if (this.checked) {
        expandIt(_$target);

        // UNCHECKED
      } else if (!this.checked) {
        collapseIt(_$target);
      }
    });
    }

After digging and spending a lot of time, finally friend of mine Mihir Solanki came with a solution which works absolutely perfect! Again big thank you Mihir :)

Hope this helps others too that may have come across similar tasks before!

Thanks