Show/Hide (via Bootstrap's collapse function) divs based on radio button

Question

I'm trying to use Bootstrap's collapse functionality to show/hide divs based on which radio button is checked. I was able to get things to work fine when I don't use Bootstrap's collapse function, however, in order to give a more consistent feel I'd like to take advantage of this function.

Here's a snippet of the HTML in question:

<div class="col-xs-12 form-group">
  <label class="radio-inline">
    <input type="radio" id="send-now-radio" name="when" value="send-now" checked> <strong>Send Now</strong>
  </label>
  <label class="radio-inline">
    <input type="radio" id="pickup-radio" name="when" value="pickup"> <strong>Hold for pickup</strong>
  </label>
  <label class="radio-inline">
    <input type="radio" id="fax-radio" name="when" value="fax"> <strong>Fax</strong>
  </label>
  <label class="radio-inline">
    <input type="radio" id="email-radio" name="when" value="email"> <strong>Email</strong>
  </label>
</div>
<div class="col-xs-12">
  <div id="send">Send</div>
  <div id="pickup">Pickup</div>
  <div id="fax">Fax</div>
  <div id="email">Email</div>
</div>

And here's my javascript code:

$(document).ready(function()
{
  // Hide all but one method div (since all are shown in case the user has JS disabled)
  $('#send').show();
  $('#pickup').hide();
  $('#fax').hide();
  $('#email').hide();

  // Attach to the radio buttons when they change
  $('#send-now-radio, #pickup-radio, #fax-radio, #email-radio').on('change', function () {
    // Make sure that this change is because a radio button has been checked
    if (!this.checked) return

    // Check which radio button has changed
    if (this.id == 'send-now-radio') {
      $('#send').collapse('show');
      $('#pickup').collapse('hide');
      $('#fax').collapse('hide');
      $('#email').collapse('hide');
    } else if (this.id == 'pickup-radio') {
      $('#send').collapse('hide');
      $('#pickup').collapse('show');
      $('#fax').collapse('hide');
      $('#email').collapse('hide');
    } else if (this.id == 'fax-radio') {
      $('#send').collapse('hide');
      $('#pickup').collapse('hide');
      $('#fax').collapse('show');
      $('#email').collapse('hide');
    } else // if (this.id == 'email-radio') {
      $('#send').collapse('hide');
      $('#pickup').collapse('hide');
      $('#fax').collapse('hide');
      $('#email').collapse('show');
    }
  });
};

Here's a link to a JS fiddle with all of this: http://jsfiddle.net/DTcHh/156/

Unfortunately I'm missing something, cause the behavior is weird and not what I would expect. Any help is highly appreciated.

Answer 1

As @emptywalls mentioned, the Bootstrap collapse function won't work. I tried it and it almost does, except that it is based on clicking the source element, not it's state. A radio button needs to pay attention to it's state.

But I wanted something that allowed me to mark up the element with data tags and have it inherit the functionality, as the bootstrap collapse does. So I came up with this:

<input data-target="#send" data-toggle="radio-collapse" id="send_now_radio" name="when" type="radio" value="send-now">
<div id="send" class="collapse">Send</div>

And then have this included once in your site and it will apply to all such buttons.

$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) {
  var $item = $(item);
  var $target = $($item.data('target'));

  $('input[type=radio][name="' + item.name + '"]').on('change', function() {
    if($item.is(':checked')) {
      $target.collapse('show');
    } else {
      $target.collapse('hide');
    }
  });
});

This uses the collapse function of Bootstrap for the animation. You could just as easily use jQuery hide() and show().

Answer 2

First of all, excellent question. You provided code, made it clear what you tried, etc. Love it.

I forked your JSFiddle, and came up with this: http://jsfiddle.net/emptywalls/EgVF9/

Here's the Javascript:

$('input[type=radio]').on('change', function () {
    if (!this.checked) return
    $('.collapse').not($('div.' + $(this).attr('class'))).slideUp();
    $('.collapse.' + $(this).attr('class')).slideDown();
});

I wouldn't recommend using the collapse functionality from Bootstrap, it relies on a very different DOM structure from what you need. My fiddle uses just jQuery to accomplish what you need. My approach was to pair the radio buttons and divs with classes, so you can DRY up your code.