Menu icon Foundation
F5 Accordion arrows

I think past version of the accordion had up and down arrows depending on id the accordion was open or closed. I was going to try to add it, but there is no class that is added to the
Thanks!
Shawn

<code><dd></code> or the <code><dd><a></code> to indicate that it is open. There is a .active class that is added to the content, but that is it. Is there an easy way to add arrows to the <code><dd></code>?

   Thanks!
Shawn         

         

accordion

I think past version of the accordion had up and down arrows depending on id the accordion was open or closed. I was going to try to add it, but there is no class that is added to the
Thanks!
Shawn

<code><dd></code> or the <code><dd><a></code> to indicate that it is open. There is a .active class that is added to the content, but that is it. Is there an easy way to add arrows to the <code><dd></code>?

   Thanks!
Shawn         

         

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

Victor Stegaru over 5 years ago

Same here.

Did you found out why?

Lynda Spangler over 5 years ago

I added a plus and minus icon and use CSS to control which icon is showing. The same could be done for arrows. I am using Font Awesome on the site to display the plus and minus. Hence the <i class="fa fa-plus"></i> and <i class="fa fa-minus"></i>

HTML:

<dl class="accordion" data-accordion>
    <dd><a href="#panel1"><i class="fa fa-plus"></i><i class="fa fa-minus"></i> References</a>
        <div id="panel1" class="content">
            <!-- CONTENT -->
        </div>
    </dd>
</dl>

CSS:

.accordion .fa-plus{
  display:inline;
}
.accordion .fa-minus{
  display:none;
}
.accordion .active .fa-plus{
  display:none;
}
.accordion .active .fa-minus{
  display:inline;
}

There may be a better way to write this but this works well for me.

Franck Lafontaine over 5 years ago

Thanks !
Awesome.

Gene M over 5 years ago

How do you apply an active class to to show them?

Wing-Hou Chan over 5 years ago

@Gene M

.active will be applied to the dd if it is active by javascript. Then depending which hierarchy is true – .accordion.active.fa-plus or .accordion.active.fa-minus – the relevant style will be applied to .fa-plus or .fa-minus to hide or show the icon as relevant.

Gene M over 5 years ago

Currently it doesn't look like javascript is applying .active to dd. Any ideas how to fix that?

Tina Beil almost 5 years ago

@Gene M

You can configure it with "Optional Javascript Configuration", which is explained here: http://foundation.zurb.com/docs/components/accordion.html

For all I've found a shorter solution by using Foundation Icon Font 3! There is only the need of some short SASS statements:

.accordion-navigation{
     a:before{
       content: "\f199";
       padding-right: rem-calc(5);
     }
     &.active a:before{
       content: "\f176";
     }
   }

The content are the icons "plus" and "minus". You can chose any icon by searching it in the 'foundation-icons.css".
And this additional (selector for the font-family) line in the 'foundation-icons.css":

.accordion-navigation a:before

Jeff Lyon almost 5 years ago

This code worked for me with F5 and font awesome.

.accordion-navigation
  >a:after
    content: $fa-var-angle-right
    @extend %icons-core
    padding-left: rem-calc(5)
    float: right

  &.active a:after
    content: $fa-var-angle-down

Francis Penny over 4 years ago

It would be nice if the "most advanced front-end framework in the world" included the basic functionality of open and close icons in the accordion. Alas, it seems (based on the date of the first post in this thread) that two years or so have past and the latest download is still attaching the active class to the panel and not the header/title of the accordion.

Rafi Benkual over 4 years ago

@francis - not sure what issue you ran into?

Here is how I did it: http://codepen.io/rafibomb/pen/pvmwGX

Amir about 4 years ago

Rafi you are my hero.