Menu icon Foundation
Adding toggle icon to accordion

i added an icon to the foundation 5 accordion in plus/minus style which i want to toggle when a panel get's opened and closed again

            
<dd>
   <a href="#panel1"><span class="faq-icon icon-plus2" ></span>Panel 1</a>
    <div id="panel1" class="content">
        Panel 1. 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.
   </div>
</dd>
         

i started with this code

$(".accordion a").on('click',function(){
    $(this).children('.icon-minus2, .icon-plus2').toggleClass("icon-minus2 icon-plus2");
});
            

         

but of course the icon does not toggle back if i click on a new panel. it stays on minus
what code do i have to add so it toggles back to plus when any other panel is opened?

i am just a jquery beginner so some advice would be nice..

accordiontoggle

i added an icon to the foundation 5 accordion in plus/minus style which i want to toggle when a panel get's opened and closed again

            
<dd>
   <a href="#panel1"><span class="faq-icon icon-plus2" ></span>Panel 1</a>
    <div id="panel1" class="content">
        Panel 1. 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.
   </div>
</dd>
         

i started with this code

$(".accordion a").on('click',function(){
    $(this).children('.icon-minus2, .icon-plus2').toggleClass("icon-minus2 icon-plus2");
});
            

         

but of course the icon does not toggle back if i click on a new panel. it stays on minus
what code do i have to add so it toggles back to plus when any other panel is opened?

i am just a jquery beginner so some advice would be nice..

This post has been closed. No new replies can be added.

pixelkai over 5 years ago

ahh okay.. whenever i post a question in the forum i find the solution soon ..lol

i changed the code to this so it is working know

```$(".accordion a").on('click',function(){
$("dd.active a").children('.icon-minus2, .icon-plus2').toggleClass("icon-minus2 icon-plus2");
$(this).children('.icon-minus2, .icon-plus2').toggleClass("icon-minus2 icon-plus2");
});

pixelkai over 5 years ago

but it is obvious not very elegant either... lol

pixelkai over 5 years ago

sorry for the spam but the solution is not working correctly so the question is still not solved

Carlos Morán over 5 years ago

I was able to add an icon using CSS only

//The accordion is closed
.accordion-icon:before {
    content: "\f0d7";
}
//The accordion is open
.active .accordion-icon:before {
    content: "\f0d8";
 }
<a href="#panel1">Title<span class="fa accordion-icon"></span></a>

With .accordion-icon:before and .accordion-icon:before being copies of Font Awesome's fa-caret-down:before and fa-caret-up:before

So in your case you should need

<a href="#panel1"><span class="faq-icon my-icon-class" ></span>Panel 1</a>

And on the CSS file you add a copy of icon-plus2 on ".my-icon-class" and a copy of icon-minus2 on ".active .my-icon-class" (don't forget to add the selector/other stuff to leave the classes just like the one in your icon font css)

David Barker about 5 years ago

Thanks this "nearly" worked for me.

Other codes worked but not the Font Awesome unicode such as: \f0d8

I found I had to specify the font family as well:

//The accordion is closed
.accordion-icon:before {
    font-family: FontAwesome; 
    content: "\f0d7";
}

Sorry not sure why my code comment isn't formatting correctly!

Eduardo82 over 4 years ago

Nice tip. Thanks for sharing.

Bob Sawyer over 4 years ago

Probably not very elegant, but I solved it this way via jQuery (also using the FoundIcon up/down arrow icons):

// on accordions with down arrows, change these to "up" arrows 
// for active panels
$('.accordion .accordion-navigation').first().find('a i').removeClass('foundicon-down-arrow').addClass('foundicon-up-arrow');
$('.accordion').on('toggled', function (event, accordion) {
   $('.accordion .accordion-navigation').first().find('a i').removeClass('foundicon-up-arrow').addClass('foundicon-down-arrow');
     if ($('.accordion .accordion-navigation').hasClass('active')) {
    $('.accordion .accordion-navigation.active a i').removeClass('foundicon-down-arrow').addClass('foundicon-up-arrow');
  } else {
    $('.accordion .accordion-navigation a i').removeClass('foundicon-up-arrow').addClass('foundicon-down-arrow');
  }
});

HTML snippet:

<dd class="accordion-navigation">
   <a href="#panel-2013"><i class="foundicon-down-arrow"></i> 2013 Announcements</a>
   <div id="panel-2013" class="content">

Darryl over 4 years ago

Using Carlos and David's css/font awesome method above....
Has anyone tried to get the icons to float to the very right of the accordian box.
If so... any ideas?

Steve Alpine over 4 years ago

Hi Darryl,
Try using absolute positioning on the accordion-icon:before and set values for top and right.
Seems to work fine.
Best,
Steve

Carlos Morán over 4 years ago

Hello!

I was working on a project where I need to do what Darryl is asking, and I found that the answer is as simple as adding the 'right' class to the

<a href="#panel1">Title<span class="fa accordion-icon right"></span></a>

T M over 4 years ago

Is there any solution that does not use font awesome but uses two icons instead? I have a pair of icons from google's material design that I wanted to swap on toggle of the accordion. I have them as backgrounds in css classes. I have tried the jquery 2 toggleClass, the add and remove class, and the attribute method to try to change the class on toggle. None of the methods seem to work. I was looking at ExtJS by Sencha and they seem to do it perfectly, but thats a very costly solution.

UPDATE: found a solution with foundation 5.5.1 but trying to update my comment on here failed first time