So I'm trying to invoke collapse programatically with just JavaScript. My form has a couple checkboxes that start empty. If "No" is clicked, then I want to collapse the section, otherwise it should remain open. Switching back and forth between No and Yes should collapse and show the section respectively.
Attempt #1
Since it's being done on the fly, before I can call .collapse('show') or .collapse('hide'), I need to invoke the collapse plugin by calling .collapse() directly.
Since I'm just invoking at this point, I'm passing in the object {toggle: false} which:
Toggles the collapsible element on invocation (default:
true)
This should ready the element and then allow hide and show to do their thing.
But if the first call is to hide, it won't work. After the first pass, toggling works fine back and forth, but it won't work the first time.
$(".radio input:radio").change(function(){
if ($(this).is(":checked")) {
var selected = (this.value === "True");
var selector = $(this).closest(".radio").data("toggle-target");
var $section = $(selector)
// initialize, but don't do anything yet
if (!$section.data('bs.collapse')) {
$section.collapse({ toggle: false });
}
// show or hide based on selection
var collapseAction = selected ? 'show' : 'hide';
$section.collapse(collapseAction);
}
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container" >
<div class="radio" data-toggle-target="#section">
<label><input type="radio" name="radio" value="False"> <b>No</b></label><br>
<label><input type="radio" name="radio" value="True"> <b>Yes</b></label>
</div>
<div id="section">
<h2>Rest of the Section</h2>
</div>
</div>
Attempt #2
As a second attempt, we could allow the toggle option to be true on the first invocation if we want to immediately hide it. Otherwise, we'll prevent the default action.
$(".radio input:radio").change(function(){
if ($(this).is(":checked")) {
var selected = (this.value === "True");
var selector = $(this).closest(".radio").data("toggle-target");
var $section = $(selector)
// check if initialized
if (!$section.data('bs.collapse')) {
// initialize and do toggle if we need to hide
$section.collapse({ toggle: selected });
} else {
// show or hide based on selection
var collapseAction = selected ? 'show' : 'hide';
$section.collapse(collapseAction);
}
}
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container" >
<div class="radio" data-toggle-target="#section">
<label><input type="radio" name="radio" value="False"> <b>No</b></label><br>
<label><input type="radio" name="radio" value="True"> <b>Yes</b></label>
</div>
<div id="section">
<h2>Rest of the Section</h2>
</div>
</div>
I've tried a lot of possible iterations of invoking, showing, and hiding, and nothing seems to hide the section right away when no is clicked.
Also, ideally the element should not have any show animation if the first click is on 'yes' because it's already visible so animations would just be confusing.
This seems related to these two GitHub issues but both appeared fixed within the code or offer no further solution
