Bootstrap nested accordion issue

Question

We are facing an issue in using nested bootstrap accordions. On click of the Parent accordion Paperless Settings The child element icons are changing and vice versa is happening too. It should not happen, the inner accordion like any other normal accordion.

enter image description here

Fiddle link: https://jsfiddle.net/6Lspm1k1/

Javascript:

$('#accordion .collapse').on('shown.bs.collapse', function(){ $(this).parent().find(".fa-plus").removeClass("fa-plus").addClass("fa-nus"); }).on('hidden.bs.collapse', function(){ $(this).parent().find(".fa-minus").removeClass("fa-minus").addClass("fa- plus"); });

gernberg · Accepted Answer · 2015-06-25 15:00:48Z

So the problem is that due to some reason that callback fires all the way up the accordion.

One solution that works and according to me is cleaner is to use CSS-selectors to determine what to display:

I've added so that each header has a fa-plus and a fa-minus and with CSS hides / shows depending on the class .collapsed

HTML changed from:

 <span class="fa fa-minus"></span>

to:

 <span class="fa fa-minus"></span><span class="fa fa-plus">

CSS added:

.accordion-toggle.collapsed > .fa-minus{ display:none; } .accordion-toggle > .fa-plus{ display:none; } .accordion-toggle.collapsed > .fa-plus{ display:inline; }

https://jsfiddle.net/6Lspm1k1/3/

Hi @gernberg , i have tested in fiddle , but its not working . Can u please give me the solution in fiddle.
Hi @gernberg , Thanks! But the parent icon is changing on click of the children. Can u please have a look on that.
The parent icon is changing because for some reason 'hidden.bs.collapse' is called for the parent node when a child node is closed. I'll see if I can find out why!
@manojistack I've updated the question with a better solution, you could use the same approach (selecting on .collapsed) with jQuery but I think the CSS-based solution is cleaner.

Collectives™ on Stack Overflow

Bootstrap nested accordion issue

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related