Я пытаюсь использовать функцию свертывания Bootstrap, чтобы показать/скрыть divs, на основе которого установлен переключатель. Я смог заставить все работать нормально, когда я не использую функцию свертывания Bootstrap, однако, чтобы дать более последовательное ощущение, я хотел бы воспользоваться этой функцией.
Здесь приведен фрагмент HTML-кода:
<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>
И вот мой код javascript:
$(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');
}
});
};
Здесь ссылка на скрипт JS со всем этим: http://jsfiddle.net/DTcHh/156/
К сожалению, я что-то упускаю, потому что поведение странно, а не то, что я ожидаю. Любая помощь приветствуется.