asked on

applying + and - icons to bootstrap 3 accordian menu

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

Francisco Igor

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

jblayney

ASKER

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

Francisco Igor

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

jblayney

ASKER

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

Francisco Igor

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

jblayney

ASKER

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

ASKER CERTIFIED SOLUTION

Francisco Igor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jblayney

ASKER

thank you