Foundation 5 Tabs and Accordion dont seem to work

Question

I'm using the Foundation 5 framework and trying to use the js tabs plugin they provide.

However I'm getting the following result http://crea8tion.com/PU2/index.html#

Whilst on their site it should be like this http://foundation.zurb.com/docs/components/tabs.html

Not sure what I'm doing wrong?

Is it that the java script is not being called correctly?

Answer 1

Same thing happened to me. It was as if the accordion css wasn't included when you customized your Foundation build.

I solved it by downloading the standard Foundation and copying the content of foundation.min.css into the folder I am using.

Answer 2

This is usually because of the missing CSS rules, which happen if do you a custom build. For example, here is my page with a custom build where I left out the tabs.

I then copied over the rules from a complete download and tested it in the browser. Which you can also do to see if this is your issue.

.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: 1rem;
      padding-right: 2rem;
      padding-bottom: 1.0625rem;
      padding-left: 2rem;
      font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
      font-size: 1rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: #fff; }
  .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.5rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
    .tabs-content > .content.active {
      display: block; }
    .tabs-content > .content.contained {
      padding: 0.9375rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.9375rem; }

@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; } }
ul.pagination {
  display: block;
  height: 1.5rem;
  margin-left: -0.3125rem; }
  ul.pagination li {
    height: 1.5rem;
    color: #222222;
    font-size: 0.875rem;
    margin-left: 0.3125rem; }
    ul.pagination li a {
      display: block;
      padding: 0.0625rem 0.625rem 0.0625rem;
      color: #999999;
      -webkit-border-radius: 3px;
      border-radius: 3px; }
    ul.pagination li:hover a,
    ul.pagination li a:focus {
      background: #e6e6e6; }
    ul.pagination li.unavailable a {
      cursor: default;
      color: #999999; }
    ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus {
      background: transparent; }
    ul.pagination li.current a {
      background: #008cba;
      color: white;
      font-weight: bold;
      cursor: default; }
      ul.pagination li.current a:hover, ul.pagination li.current a:focus {
        background: #008cba; }
  ul.pagination li {
    float: left;
    display: block; }

Paste in code to test

Then you can proceed to either add in the code manually or just replace the foundation css files.