Skip to content

Instantly share code, notes, and snippets.

@AmyStephen

AmyStephen/tabs.html

Created January 24, 2014 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AmyStephen/8597943 to your computer and use it in GitHub Desktop.
Save AmyStephen/8597943 to your computer and use it in GitHub Desktop.
Download ZIP
Foundation 5 - Tabs with embedded grid
Raw
tabs.html
<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Molajo</title>
<link rel="stylesheet" href="/Css/normalize.css">
<link rel="stylesheet" href="/Css/foundation.css">
<script src="/Js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div id="wrapper" class="row">
<div class="large-12 columns">
<dl class="tabs" data-tab>
<dd class=" active">
<a href="#tab1">Tab1</a>
</dd>
<dd class="">
<a href="#tab2">Tab2</a>
</dd>
<dd class="">
<a href="#tab3">Tab3</a>
</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="tab1">
<div class="row">
<div class="large-8 small-12 columns"> <!--Column width does not work inside of tab-->
<p>Body</p>
</div>
<div class="large-4 small-12 columns"> <!--Column width does not work inside of tab-->
<p>Sidebar</p>
</div>
</div>
</div>
<div class="content" id="tab2">
<h3>Tab2</h3>
</div>
<div class="content" id="tab3">
<h3>Tab3</h3>
</div>
</div>
</div>
</div>
<script src="/Js/vendor/jquery.js"></script>
<script src="/Js/foundation/foundation.js"></script>
<script src="/Js/foundation/foundation.tab.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment