Menu icon Foundation
Accordion Titles "is-active" issue

I am making an accordion with multi-expand set to true, and the "is-active" class is not removing and attaching itself properly.

I am using Foundation 6.3. Did something about the accordion change between 6.3 and 6.4?  I've basically lifted the markup from the documentation, and the accordion works as expected on the documentation site. 

Here is my code. I have set accordion-plusminus to false and added an icon in front of the title.

<ul class="accordion" data-accordion data-multi-expand="true">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">
    <span class="ui-icon ui-icon-carat-r-blue"></span>Parts</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
    </div>
  </li>
              
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">
    <span class="ui-icon ui-icon-carat-r-blue"></span>Features</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 2. Lorem ipsum dolor</p>
    </div>
  </li>
</ul>

 

The accordion loads as expected.

Accordion loads normally

The bottom panel opens as expected.

Both panels open as expected

But when I close the bottom panel, the accordion-title retains its "is-active" class. When I click anywhere else on the page, the class is removed.

Closing second panel, title does not lose "is-active"

 

Any help will be much appreciated. 

 

 

accordion

I am making an accordion with multi-expand set to true, and the "is-active" class is not removing and attaching itself properly.

I am using Foundation 6.3. Did something about the accordion change between 6.3 and 6.4?  I've basically lifted the markup from the documentation, and the accordion works as expected on the documentation site. 

Here is my code. I have set accordion-plusminus to false and added an icon in front of the title.

<ul class="accordion" data-accordion data-multi-expand="true">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">
    <span class="ui-icon ui-icon-carat-r-blue"></span>Parts</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
    </div>
  </li>
              
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">
    <span class="ui-icon ui-icon-carat-r-blue"></span>Features</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 2. Lorem ipsum dolor</p>
    </div>
  </li>
</ul>

 

The accordion loads as expected.

Accordion loads normally

The bottom panel opens as expected.

Both panels open as expected

But when I close the bottom panel, the accordion-title retains its "is-active" class. When I click anywhere else on the page, the class is removed.

Closing second panel, title does not lose "is-active"

 

Any help will be much appreciated. 

 

 

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

Rafi Benkual over 2 years ago

Seems to work here - https://codepen.io/rafibomb/pen/eEJoNB?editors=1100

c  Not sure about the version difference but upgrading could help.

Janet Tingey over 2 years ago

Thanks! This is a bit embarassing, but I figured out that I had added a class on ":focus" that was messing things up. I removed it and I'm good to go. Thanks for the reply.