Menu icon Foundation
Tabs aren't working.

Hi, so tabs aren't working. When I click on them they don't do anything.

Here's my code:

<!DOCTYPE html>

<html>
    <head>
        <title>397</title>
        <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
        <script src="/assets/javascripts/foundation.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" media="screen" href="/assets/stylesheets/foundation.min.css">
        
    	<link rel="stylesheet" media="screen" 
            href="/assets/stylesheets/profile.css">            

    </head>
    <body>
		<nav class="top-bar" data-topbar>
			<ul class="title-area">
				<li class="name">
			    <h1>
		          <a href="/">
		            Play! Forum
			      </a>
			    </h1>
			   </li>
		    </ul>
		    <section class="top-bar-section">
		      <ul class="right">
		        <li class="divider"></li>
			      <li><a href="/">Home</a></li>
			      <li class="divider"></li>
			      <li><a href="#">Play</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Friends</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Forum</a></li>
		       	  <li class="divider"></li>
	           	  <li class ="has-form"><a href="/register" class="small button">Register</a></li>
		       	  <li class="divider"></li>
			  </ul>
		  </section>
		</nav>
		<header>
		  <div class="row">
		    <div class="large-12 columns">
		      <h1>397</h1>
		      <h4>update</h4>
		    </div>
		  </div>
		</header>
        
<div class = clearfix>
		<dl class="tabs vertical" data-tab>
		  <dd class="active"><a href="#panel1a">Tab 1</a></dd>
		  <dd><a href="#panel2a">Tab 2</a></dd>
		  <dd><a href="#panel3a">Tab 3</a></dd>
		  <dd><a href="#panel4a">Tab 4</a></dd>
		</dl>
		<div class="tabs-content vertical">
		  <div class="content active" id="panel1a">
		    <p>Panel 1 content goes here.</p>
		  </div>
		  <div class="content" id="panel2a">
		    <p>Panel 2 content goes here.</p>
		  </div>
		  <div class="content" id="panel3a">
		    <p>Panel 3 content goes here.</p>
		  </div>
		  <div class="content" id="panel4a">
		    <p>Panel 4 content goes here.</p>
		  </div>
		</div>
</div>

      <div id="footer">
      	  	</br></br>
	  <footer class="row">
	    <div class="large-16 columns">
	      <div class="row">
	          <ul class="inline-list">
	            <li><a href="/">Home</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/terms">Terms</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/about">About</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/contact">Contact</a></li>
	          </ul>
	      </div>
	    </div>
	    <div class="large-12 columns">
	      <div class="row">
	            <center><p>Website copyright Play! Forum, 2014.</p></center>
	      </div>
	      </br>
	    </div>
	    </div>
	  </footer>
    </body>
</html>
            

         

Profile.css

html,body{
 overflow:auto;
}
body{
 margin:0;
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
}
#wrapper{
 overflow:hidden;
 min-height:100%;
}
.clear{clear:both;}
#left,#right{
 width: 50%;
 max-width:50%;
 margin-bottom: -10000px;
 padding-bottom: 10000px;
 min-height:100%;
}
#left{
 float:left;
 color: blue
}
#right{
 float:right;
 color: red
}

.sidebar {
background: #FAFAFA;
padding: 32px 20px;
}

tabs

Hi, so tabs aren't working. When I click on them they don't do anything.

Here's my code:

<!DOCTYPE html>

<html>
    <head>
        <title>397</title>
        <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
        <script src="/assets/javascripts/foundation.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" media="screen" href="/assets/stylesheets/foundation.min.css">
        
    	<link rel="stylesheet" media="screen" 
            href="/assets/stylesheets/profile.css">            

    </head>
    <body>
		<nav class="top-bar" data-topbar>
			<ul class="title-area">
				<li class="name">
			    <h1>
		          <a href="/">
		            Play! Forum
			      </a>
			    </h1>
			   </li>
		    </ul>
		    <section class="top-bar-section">
		      <ul class="right">
		        <li class="divider"></li>
			      <li><a href="/">Home</a></li>
			      <li class="divider"></li>
			      <li><a href="#">Play</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Friends</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Forum</a></li>
		       	  <li class="divider"></li>
	           	  <li class ="has-form"><a href="/register" class="small button">Register</a></li>
		       	  <li class="divider"></li>
			  </ul>
		  </section>
		</nav>
		<header>
		  <div class="row">
		    <div class="large-12 columns">
		      <h1>397</h1>
		      <h4>update</h4>
		    </div>
		  </div>
		</header>
        
<div class = clearfix>
		<dl class="tabs vertical" data-tab>
		  <dd class="active"><a href="#panel1a">Tab 1</a></dd>
		  <dd><a href="#panel2a">Tab 2</a></dd>
		  <dd><a href="#panel3a">Tab 3</a></dd>
		  <dd><a href="#panel4a">Tab 4</a></dd>
		</dl>
		<div class="tabs-content vertical">
		  <div class="content active" id="panel1a">
		    <p>Panel 1 content goes here.</p>
		  </div>
		  <div class="content" id="panel2a">
		    <p>Panel 2 content goes here.</p>
		  </div>
		  <div class="content" id="panel3a">
		    <p>Panel 3 content goes here.</p>
		  </div>
		  <div class="content" id="panel4a">
		    <p>Panel 4 content goes here.</p>
		  </div>
		</div>
</div>

      <div id="footer">
      	  	</br></br>
	  <footer class="row">
	    <div class="large-16 columns">
	      <div class="row">
	          <ul class="inline-list">
	            <li><a href="/">Home</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/terms">Terms</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/about">About</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/contact">Contact</a></li>
	          </ul>
	      </div>
	    </div>
	    <div class="large-12 columns">
	      <div class="row">
	            <center><p>Website copyright Play! Forum, 2014.</p></center>
	      </div>
	      </br>
	    </div>
	    </div>
	  </footer>
    </body>
</html>
            

         

Profile.css

html,body{
 overflow:auto;
}
body{
 margin:0;
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
}
#wrapper{
 overflow:hidden;
 min-height:100%;
}
.clear{clear:both;}
#left,#right{
 width: 50%;
 max-width:50%;
 margin-bottom: -10000px;
 padding-bottom: 10000px;
 min-height:100%;
}
#left{
 float:left;
 color: blue
}
#right{
 float:right;
 color: red
}

.sidebar {
background: #FAFAFA;
padding: 32px 20px;
}
Zack Warren over 5 years ago

After banging my head against the wall, I figured out that it's because you're not including Modernizr. Make sure you include it in the head of your document.

Apple over 5 years ago

I've added Modernizr, but tabs still are not working....

Zack Warren over 5 years ago

On Foundation 5.2.2, this code works for me for Horiz. Tabs and Vert. Tabs. You may need to update the path to each asset, but this code works.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <div class="contain-to-grid sticky">  
      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name">
            <h1><a href="#">My Site</a></h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>

        <section class="top-bar-section">
          <!-- Right Nav Section -->
          <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">
              <a href="#">Right Button Dropdown</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
          </ul>

          <!-- Left Nav Section -->
          <ul class="left">
            <li><a href="#">Left Nav Button</a></li>
          </ul>
        </section>
      </nav>
    </div>  

    <div class="row">
      <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>
      <div class="tabs-content">
        <div class="content active" id="panel2-1">
          <p>First panel content goes here...</p>
        </div>
        <div class="content" id="panel2-2">
          <p>Second panel content goes here...</p>
        </div>
        <div class="content" id="panel2-3">
          <p>Third panel content goes here...</p>
        </div>
        <div class="content" id="panel2-4">
          <p>Fourth panel content goes here...</p>
        </div>
      </div>
    </div>

    <div class="row">
      <dl class="tabs vertical" data-tab>
        <dd class="active"><a href="#panel1a">Tab 1</a></dd>
        <dd><a href="#panel2a">Tab 2</a></dd>
        <dd><a href="#panel3a">Tab 3</a></dd>
        <dd><a href="#panel4a">Tab 4</a></dd>
      </dl>
      <div class="tabs-content vertical">
        <div class="content active" id="panel1a">
          <p>Panel 1 content goes here.</p>
        </div>
        <div class="content" id="panel2a">
          <p>Panel 2 content goes here.</p>
        </div>
        <div class="content" id="panel3a">
          <p>Panel 3 content goes here.</p>
        </div>
        <div class="content" id="panel4a">
          <p>Panel 4 content goes here.</p>
        </div>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Effe over 5 years ago

Tabs not working with fresh downloaded F5.22.

Nothing but tabs in this sample:
http://code1.soluxima.com/

ayezee over 5 years ago

@Effe actually the link you posted does NOT show tabs working.

@Apple I posted something similar to this http://foundation.zurb.com/forum/posts/15906-clarification-of-tabs-and-going-forward

What I found is that the foundation css references the list elements as dd. However, there is a github post where it claims to be fixed. Check the link I provided for more insight

Hari Harker over 4 years ago

Use <dl> and <dd>.
<ul> and <li> doesnt work even in the latest stable release.

Rafi Benkual over 4 years ago

In the original post, I don't see where Foundation JS was loaded or initialized. That is likely the issue.

@Hari - don't think thats true, the example on the docs is using both markups just fine. Also here: http://codepen.io/rafibomb/pen/EqCdJ?editors=110