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.

Brandon Arnold almost 6 years ago

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

Greg Larrenaga almost 6 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 almost 6 years ago

Thanks!!

Zane Taylor almost 6 years ago

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

Brandon Arnold almost 6 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 about 6 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; }

Arkarys almost 6 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.

Brian Feeley almost 6 years ago

Any word on this yet?