Menu icon Foundation
how to set tabs with no active element

need help on set tabs with no active content on loading. Is that possible?
Only show content if tab is clicked.
thanks

tabsactivecontent

need help on set tabs with no active content on loading. Is that possible?
Only show content if tab is clicked.
thanks

Wing-Hou Chan about 5 years ago

Howdy!

When constructing your tabs, omit the 'active' class.

For example

<div class="row">
  <dl class="tabs" data-tab>
    <dd class="">
      <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" 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>