applying + and - icons to bootstrap 3 accordian menu

jblayney
jblayney used Ask the Experts™
on
Hello,
On my page below in the mobile menu I am using an accordian menu for the Car insurance section
http://think.darkstarmedia.net/

I found this piece of code which adds a plus /minus icon when opening and closing and applied it to my page
http://www.bootply.com/89084

What is happening is that all the plus' and minus' get changes when I click open/close when in the car insurance menu

If I am in the main menu (Car Insurance, Commercial Insurance etc), the plus and minus doens't change at all

This is the javascript

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

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
F IgorDeveloper

Commented:
Have you tried separating in parts (Also try to log into console to check if each event is fired):

$('.collapse').on('shown.bs.collapse', function(){
console.log("shown.bs.collapse FIRED");
var icons=$(this).parent().find(".glyphicon-plus");
icons.removeClass("glyphicon-plus");
icons.addClass("glyphicon-minus");
});
$('.collapse').on('hidden.bs.collapse', function(){
console.log("hidden.bs.collapse FIRED");
var icons=$(this).parent().find(".glyphicon-minus");
icons.removeClass("glyphicon-minus");
icons.addClass("glyphicon-plus");
});

Open in new window

Author

Commented:
I added your code, it is being fired.

The problem is it is firing for every element every time, rather than the one I am clicking
F IgorDeveloper

Commented:
The events hidden.bs.collapse and shown.bs.collapse applies to the main menu button, not for any single collapsible element.

You need to define the event in terms of a single element (dropdown) using the dropdown event instead

http://getbootstrap.com/javascript/#dropdowns-events

Remove the older code and put this one:

$('.dropdown').on('shown.bs.dropdown', function(){
console.log("shown.bs.dropdown FIRED");
var icons=$(this).find(".glyphicon-plus");
icons.removeClass("glyphicon-plus");
icons.addClass("glyphicon-minus");
});

$('.dropdown').on('hidden.bs.dropdown', function(){
console.log("hidden.bs.dropdown FIRED");
var icons=$(this).find(".glyphicon-minus");
icons.removeClass("glyphicon-minus");
icons.addClass("glyphicon-plus");
});

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hello,

Thanks for your help, that works great for the top level, the second level (Accordian menu in car insurance mobile menu) was't changing. I tried adding this code (with many combinations of DIV or class) with no luck, I can' t seem to target the right element

$('.panel').on('shown.bs.panel', function(){
console.log("shown.bs.panel FIRED");
var icons=$(this).find(".glyphicon-plus");
icons.removeClass("glyphicon-plus");
icons.addClass("glyphicon-minus");
});

$('.panel').on('hidden.bs.panel', function(){
console.log("hidden.bs.panel FIRED");
var icons=$(this).find(".glyphicon-minus");
icons.removeClass("glyphicon-minus");
icons.addClass("glyphicon-plus");
});	

Open in new window

F IgorDeveloper

Commented:
The first parameter in on() is the name of event in this case 'shown.bs.collapse' and 'hidden.bs.collapse'

Try using

$('.panel').on('shown.bs.collapse', function(){
console.log("shown.bs.collapse panel FIRED");
var icons=$(this).find(".glyphicon-plus");
icons.removeClass("glyphicon-plus");
icons.addClass("glyphicon-minus");
});
$('.panel').on('hidden.bs.collapse', function(){
console.log("hidden.bs.collapse panel FIRED");
var icons=$(this).find(".glyphicon-minus");
icons.removeClass("glyphicon-minus");
icons.addClass("glyphicon-plus");
});

Open in new window

Author

Commented:
Hello,
Thanks again, almost there. The only issue left is that when I initially open the car insurance menu, the the accordian items all turn to a minus sign
Developer
Commented:
The dropdown event is changing ALL sub-elements with "plus sign" to "minus sign", it only must convert the first of all (in header).

The find() query must be more specific (not all "glyphicon-plus" elements)
Try replacing

var icons=$(this).find(".dropdown-toggle > .glyphicon-plus")

Open in new window


instead of

var icons=$(this).find(".glyphicon-plus")

Open in new window




In the initial code for dropdown (var icons will contain only one entry)

$('.dropdown').on('shown.bs.dropdown', function(){
console.log("shown.bs.dropdown FIRED");
var icons=$(this).find(".dropdown-toggle > .glyphicon-plus");
icons.removeClass("glyphicon-plus");
icons.addClass("glyphicon-minus");
});

$('.dropdown').on('hidden.bs.dropdown', function(){
console.log("hidden.bs.dropdown FIRED");
var icons=$(this).find(".dropdown-toggle > .glyphicon-minus");
icons.removeClass("glyphicon-minus");
icons.addClass("glyphicon-plus");
});

Open in new window

Author

Commented:
thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial