Tabs can be a really useful way to handle content, so let's cover how to use tabs. After our accordion code on or around line 294, let's add the following code:
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>Panel 1</p>
</div>
<div class="content" id="panel2">
<p>Panel 2</p>
</div>
</div>Now go ahead and refresh your browser and you will see that you can have two clickable tabs. You can add more tabs by adding or duplicating the li tag with tab-title and if you add more make sure that you also add the content inside of the "tabs-content" div. If you want to make your tabs vertical you can add the "vertical" class to after the "tabs" and "tabs-content" classes. The...