Menu icon Foundation
Accordion: Styling "active" title with CSS

In foundation4 the selected Accordion "title" was assigned the "active" class. With the redesign of the Accordion in foundation5 this does not appear to be the case.

I am currently in the process of updating my foundation4 web app ( to foundation5 ) where additional styling is applied to the selected accordion title through the use of the "active" class.
Is there a way of achieving a similar result with CSS only in foundation5 accordion?

accordion

In foundation4 the selected Accordion "title" was assigned the "active" class. With the redesign of the Accordion in foundation5 this does not appear to be the case.

I am currently in the process of updating my foundation4 web app ( to foundation5 ) where additional styling is applied to the selected accordion title through the use of the "active" class.
Is there a way of achieving a similar result with CSS only in foundation5 accordion?

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

Brian Feeley over 5 years ago

Thanks!!

Brandon Arnold over 5 years ago

This has been resloved for Foundation 5.1, if you foundation update you should be good.

Greg Larrenaga over 5 years ago

I would love for this to be resolved.

Though, it is easily monkey patched with a little messy jquery:

// Listen for click
 $('.accordionHeader').on('click', function(e) {
     // Remove the active class from all the headers.
     $('.accordionHeader').removeClass('activeHeader');
     // Add it back on to the one that was clicked.
     $(e.currentTarget).addClass('activeHeader');
 });

Brian Feeley over 5 years ago

Any word on this yet?

Zane Taylor over 5 years ago

I'm having the same issue. Seems like it should be a simple fix for the accordion module?

Arkarys over 5 years ago

Have exactly the same problem. I have a small arrow in the accordion headline that should change its direction when selected. Need your fix badly.

Brandon Arnold over 5 years ago

Yeah, it SHOULD be giving an .active class, but doesn't appear to be working. Our engineers are looking at it today, and should have a fix soon.

Tom Ta over 5 years ago

I'm stuck on this as well.

I modified the attached CSS style but that didn't do anything to the active content's title.
CSS
.accordion {
*zoom: 1;
margin-bottom: 0; }
.accordion:before, .accordion:after {
content: " ";
display: table; }
.accordion:after {
clear: both; }
.accordion dd {
display: block;
margin-bottom: 0 !important; }
.accordion dd.active a {
background: #e7e7e7; }
.accordion dd > a {
background: #C42929;
color: #D7F500;
padding: 1rem;
display: block;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 1rem; }
.accordion dd > a:hover {
background: #e2e2e2; }
.accordion dd > a:active { /* --- THIS IS WHAT I ADDED --- */
font-weight: bold;
color: #FFF;
font-size: 1.75rem;
background: #6EFF57; }
.accordion .content {
display: none;
padding: 0.9375em; }
.accordion .content.active {
display: block;
background: white; }