Menu icon Foundation
Problem with tabs is-active displaying correctly

Hi,

I have been using Foundation for a while, but just last night have come across a really strange issue with the tabs in v6.2.1.

Everything works fine when its in a standard html file, but when I add the code to my bespoke WordPress template the tabs seem to behave strangely.

They appear to look fine, but when i click the second or third anchor tag on the front end:

 <li class="tabs-title"><a href="#panel2">Tab 2</a></li>

The second tab panel appears beneath the first, then if you click the third tab, it also appears beneath the 1st and second resulting in a long page which is messed up.

I have looked at html code to try and troubleshoot and it seem the is-active is being applied to multiple li's rather then being removed when a new li is selected.

Does anyone know what maybe causing this issue?

There doesn't seem to be any errors in inspect element.

Thank you

tabs is-active not working

Hi,

I have been using Foundation for a while, but just last night have come across a really strange issue with the tabs in v6.2.1.

Everything works fine when its in a standard html file, but when I add the code to my bespoke WordPress template the tabs seem to behave strangely.

They appear to look fine, but when i click the second or third anchor tag on the front end:

 <li class="tabs-title"><a href="#panel2">Tab 2</a></li>

The second tab panel appears beneath the first, then if you click the third tab, it also appears beneath the 1st and second resulting in a long page which is messed up.

I have looked at html code to try and troubleshoot and it seem the is-active is being applied to multiple li's rather then being removed when a new li is selected.

Does anyone know what maybe causing this issue?

There doesn't seem to be any errors in inspect element.

Thank you

Ste Cro over 3 years ago

Here is the output HTML just to make things clearer:

 

<div class="large-12 medium-12 columns">
                <button class="dropdown-close">Hide</button>
                <ul class="tabs" data-tabs="qfboql-tabs" id="example-tabs">
                  <li class="tabs-title" role="presentation"><a href="#panel1" aria-selected="false" class="twitter-icon" role="tab" aria-controls="panel1" id="panel1-label"> </a> </li>
                  <li class="tabs-title" role="presentation"><a href="#panel2" class="fb-icon" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label"> </a></li>
                  <li class="tabs-title is-active" role="presentation"><a href="#panel3" class="linkedin-icon" role="tab" aria-controls="panel3" aria-selected="true" id="panel3-label"> </a></li>
                </ul>
                <div class="tabs-content" data-tabs-content="example-tabs">
                  <div class="tabs-panel is-active" id="panel1" aria-hidden="false">
                    <div class="row">
                      <div class="large-12 medium-12 columns">
                        <h2>Get Social </h2>
                        <p>To help get the conversation started you can use the sample post content.</p>
                        <p>Feel free to tweak them to reflect who you are. </p>
                        <div class="panel">
                          <p>Test here</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tabs-panel is-active" id="panel2" aria-hidden="false">
                    <p>TAB 2 - Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
                  </div>
                  <div class="tabs-panel is-active" id="panel3" role="tabpanel" aria-hidden="false" aria-labelledby="panel3-label">
                    <p>TAB 3 - Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
                  </div>
                </div>
              </div>

 

As you can see, is-active is being applied to every tab on click meaning they are all visible at the same time

Wesley Lawson over 3 years ago

 Hey Ste Cro,

I am currently having the same issue. Did you ever get it resolved?

Thanks

Alexis Abbott over 2 years ago

As I am not the only one to have had this problem and this thread is turning up in Google searches, I thought I'd give my answer.

I was missing is-active in the menu.

<ul ...>
  <li class="tabs-title is-active">Tab 1</li>
  <li ...>

 

Based on the output the original poster added, they were as well.

So to reiterate - you need is-active TWICE. Once in the menu, once in the panel. Likely I have just saved future me from this headache on my next Google outing for this answer.

Sue Hami over 1 year ago

Thank you Alex, this had been driving me mad all morning!