'Calling collapse manually doesn't trigger at certain times
On clicking I Agree, the current panel collapses and the next panel opens.
But let's say you click on Menu Item 3 and then Menu Item 4 and then back to Menu Item 3 and click I Agree, Menu Item 3 collapses as usual but Menu Item 4 doesn't show up when it should.
Any idea why this is wrong ?
document.addEventListener('DOMContentLoaded', (event) =>
{
$('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
{
let currentIndex = parseInt(e.target.id.slice(-1));
console.log("currentIndex = " + currentIndex);
$("#collapse-" + currentIndex).collapse('hide');
$("#collapse-" + (currentIndex + 1)).collapse('show');
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-default" id="panel-1">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
Menu Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio">
<label>
<input type="radio" name="agreements-1" id="agreements-1" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-2">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
Menu Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-2" id="agreements-2" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-3">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
Menu Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-3" id="agreements-3" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-4">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
Menu Item 4
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-4" id="agreements-4" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-5">
<div class="panel-heading" role="tab" id="heading-5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
Menu Item 5
</a>
</h4>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-5" id="agreements-5" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-6">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
Menu Item 6
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-6" id="agreements-6" />
I Agree
</label>
</div>
</div>
</div>
</div>
</div>Solution 1:[1]
It's hard for me to describe but it has to do with the built-in behavior (being used) of only one panel being open at a time conflicting with the near instantaneous execution of the statements in your script, while one or the other is being animated into a collapsed or uncollasped state.
Likely the property in the panel internally for "collapsed" or "uncollapsed" is set when the animation is complete.
(RESCINDED: "As such this SOLUTION uses a callback to execute your javascript to get the desired behavior.")
Instead of the callback, let the plugin handle the behavior by sending a click event via jquery to the next panel as if the user did it.
document.addEventListener('DOMContentLoaded', (event) =>
{
$('#agreements-1,#agreements-2,#agreements-3,#agreements-4,#agreements-5,#agreements-6').on("change", function(e)
{
let currentIndex = parseInt(e.target.id.slice(-1));
console.log("currentIndex = " + currentIndex);
// EDIT CHANGES FOLLOWS:
$("#panel-" + (currentIndex + 1)).find("a").click();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
<div class="panel panel-default" id="panel-1">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
Menu Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse in" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio">
<label>
<input type="radio" name="agreements-1" id="agreements-1" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-2">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">
Menu Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-2" id="agreements-2" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-3">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">
Menu Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-3" id="agreements-3" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-4">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4">
Menu Item 4
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-4" id="agreements-4" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-5">
<div class="panel-heading" role="tab" id="heading-5">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5">
Menu Item 5
</a>
</h4>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-5" id="agreements-5" />
I Agree
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="panel-6">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6">
Menu Item 6
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="radio text-left">
<label>
<input type="radio" name="agreements-6" id="agreements-6" />
I Agree
</label>
</div>
</div>
</div>
</div>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |