Menu icon Foundation
Foundation 5 Tabs

Tabs are not working properly. I seem to need to @import the tabs.js, but I already

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
  <dd><a href="#panel2-3">Tab 3</a></dd>
  <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
            

         

tabs

Tabs are not working properly. I seem to need to @import the tabs.js, but I already

<dl class="tabs" data-tab>
  <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
  <dd><a href="#panel2-2">Tab 2</a></dd>
  <dd><a href="#panel2-3">Tab 3</a></dd>
  <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
            

         
Serkan Ertürk over 5 years ago

Same issue with me Razvan because tabs code are not included in foundation.css or foundation.min.css in custom (either the other) i will try to import them from this site manually...

Serkan Ertürk over 5 years ago


.tabs {
  *zoom: 1;
  margin-bottom: 0 !important; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd {
    position: relative;
    margin-bottom: 0 !important;
    top: 1px;
    float: left; }
    .tabs dd > a {
      display: block;
      background: #efefef;
      color: #222222;
      padding-top: 0.88889rem;
      padding-right: 1.77778rem;
      padding-bottom: 0.94444rem;
      padding-left: 1.77778rem;
      font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
      font-size: 0.88889rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: white; }
  .tabs.radius dd:first-child a {
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }
  .tabs.vertical dd {
    position: inherit;
    float: none;
    display: block;
    top: auto; }

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.33333rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.83333rem 0; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.83333rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.83333rem; }

@media only screen and (min-width:40.063em) {
  .tabs.vertical {
    width: 20%;
    float: left;
    margin-bottom: 1.25rem; }
  .tabs-content.vertical {
    width: 80%;
    float: left;
    margin-left: -1px; } }

Serkan Ertürk over 5 years ago

I have added what i have extracted from this site, only min width might have change in the media query part. I have appended it to the end of my foundation.css . Tabs are working now...

Lynda Spangler over 5 years ago

If you don't do a custom build but download the default files it works. Their customizer appears to have issues.

Moein Ghezelbash over 5 years ago

When the Customize Foundation used the CSS code is not added.
This is a bug. In addition, adding the CSS code manually, the structure can not be added on the inside.

Moein Ghezelbash over 5 years ago

I'm using the code below for Foundation 5.0.2 RTL


.tabs {
  *zoom: 1;
  margin-bottom: 0 !important; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd {
    position: relative;
    margin-bottom: 0 !important;
    top: 1px;
    float: right; }
    .tabs dd > a {
      display: block;
      background: #efefef;
      color: #222222;
      padding-top: 0.88889rem;
      padding-right: 1.77778rem;
      padding-bottom: 0.94444rem;
      padding-left: 1.77778rem;
      font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
      font-size: 0.88889rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: white; }
  .tabs.radius dd:first-child a {
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }
  .tabs.vertical dd {
    position: inherit;
    float: none;
    display: block;
    top: auto; }

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.33333rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: right;
    padding: 0.83333rem 0; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.83333rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.83333rem; }

@media only screen and (min-width:40.063em) {
  .tabs.vertical {
    width: 20%;
    float: right;
    margin-bottom: 1.25rem; }
  .tabs-content.vertical {
    width: 80%;
    float: right;
    margin-right: -1px; } }

Alan Ashbaugh about 5 years ago

I'm having the same issue. Can't get the tabs to do no matter what I do.

I had similar troubles with the off-canvas and dropdown scripts, and had to re-download the package.

Does anyone have any tips? I think I have all the CSS. Can I manually call the tab function to initialize?

EDIT: I'm giving up. Going to go install a jQuery tabs plugin in like 5 minutes.

Tony Presnow almost 5 years ago

I'm also having the same problem. I've tried downloading the full version again, but no change.

Rafi Benkual almost 5 years ago

So, what are my steps to reproduce?

  1. download custom build (with tabs)
  2. switch js to
<script src="/js/foundation.js"></script>

<script src="/js/foundation.tab.js"></script>
3. make tabs ?

Lyn almost 5 years ago

Hey there,

We indeed need more info about all of this.
Like a link (website or codepen) where we can actually witness the behavior that would be the best.

Regards,

Lyn.

nicotr014 almost 5 years ago

I'm using the non-customized default scss version of foundation and tabs just do not work.

I've included

'/assets/foundation/js/foundation/foundation.js'
'/assets/foundation/js/foundation/foundation.tab.js'
'/assets/foundation/js/foundation/foundation.topbar.js'
'/assets/foundation/js/foundation/foundation.dropdown.js'

and

@import "../foundation/scss/foundation/settings";
@import "../foundation/scss/normalize";
@import "../foundation/scss/foundation";

Everything is styled correctly and the js tabs code inits but mouseover or clicks do nothing.

Please help

abdessamad idrissi almost 5 years ago

Check this;
https://github.com/zurb/foundation/issues/5238

Did you copy correctly the example HTML?