Menu
I have this accordion thing from bootstrap. The arrow icons point down.
Then I click on Competency1, I get (Competency1 icon up, Competency2 icon down):
But, if I click on Competency2 now, I get (Competency1 icon is still up, Competency2 icon up):
Is this a bug in bootstrap, or it could be easily fixed?
Thanks.
869
Via data attributes Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header. You can also expand or collapse the accordion items through external button click.
When you use the accordion in Bootstrap, the point is to wrap the cards in an element with an individual ID, and then target this element as the data-parent of the collapsibles by referring to the id . Using this simple addition, you can make your content display more interactively.
It's hard to offer suggestions without seeing your code. You might be triggering the image swap only on the 'show' event (check for typos in your js).
Here is what I use to create the same effect on my sites:
HTML:
<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<i class="icon-chevron-down"></i>
Collapsible Group Item #1
</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<i class="icon-chevron-down"></i>
Collapsible Group Item #2
</a>
</div>
</div>
</div>
JavaScript:
$('.accordion').on('show hide', function (n) {
$(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});
It appears that this is occurring because clicking on Competency2 collapses Competency1 when Competency1 is already open. Because there is no click event that occurs on Competency1 when it collapses in this manner, the caret is still pointing upward.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
