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

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.