Foundations Vertical Tabs

by JohnPosted on June 14, 2014 Posted in Foundation, Uncategorized

“Expectation is the mother of all frustration” – Antonio Banderas

Had an awesome amount of frustration getting the vertical tabs example to work. I probably

• don’t yet understand how Foundation works
• misread the documentation
• am congenitally stupid

The only thing that stops me offing myself is that others seemed to be having similar problems.

I was missing two parts of the problem:

1. The tabs themselves are supposed to be defined as <dd>, not <li>

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

2. I needed to explicitly include foundation.tab.js

<script src="media/scripts/vendor/jquery.js"></script>
<script src="media/scripts/foundation/foundation.js"></script>
<script src="media/scripts/foundation/foundation.tab.js"></script>
<script>
$(document).foundation();
</script>