Expand/collapse Several Blocks At The Same Time?
Solution 1:
The code that youve used will work as expected in bootstrap3 due to the way collapse was handled then (You can verify it by using JS & CSS of bootstrap V3)
Comming to solving your problem the following snippet would work as expected:
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click eventvar target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each elementif ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
TIP:
We can also pass
toggle
argument to thecollapse
function and get rid of the if-else condition
$(this).collapse('toggle');
can be used to replace the if-else
But I did not use this in my example to show that you can add additional computation in it
Working Fiddle
UPDATE: The updated question asks for individual control for the block
To acheive that, we can use the default method of triggering the action with a button element.
<divclass="list-group-item"><divclass="collapse block"id="block-1">
FIRST BLOCK
</div></div><buttonclass="btn btn-primary"type="button"data-toggle="collapse"data-target="#block-1">
Block 1
</button>
You can find the updated jsFidde here
Solution 2:
Add an else statement to handle all other cases that don't match the criteria to show. Try this:
$(function () {
$('#expand-collapse').on('click',function(){
$('[data-toggle="collapse"]').each(function(){
var objectID=$(this).attr('data-target');
if($(objectID).hasClass('.collapse')===false)
{
$(objectID).collapse('show');
} else {
$(objectID).collapse('hide');
}
});
});
});
Solution 3:
There is an error with the Bootstrap v4.0.0-alpha.6 version with the transitioning that will be solved on the next release.
See the issue 22256 and pull 21743 links for more information.
Post a Comment for "Expand/collapse Several Blocks At The Same Time?"