CODEWITHSUNDEEP
htmlcssresponsive-designzurb-foundation
NeatNerd
NeatNerd

Reputation: 2373

Foundation 5 Accordion with vertical tabs

Im trying to add vertical tabs in accordion in Foundation 5. So, what I did I just copied the code from http://foundation.zurb.com/docs/components/accordion.html and changed the tab type to vertical:

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1">Accordion 1</a>
    <div id="panel1" class="content active">
      <dl class="tabs vertical" 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 vertical">
        <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>
  </dd>
  <dd>
    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd>
    <a href="#panel3">Accordion 3</a>
    <div id="panel3" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
</dl>

What I get is: enter image description here

Any idea why it doesnt scale with tabs but rather with text??? And ofc how to fix it?

Upvotes: 0

Views: 2757

Answers (1)

JohanVdR
JohanVdR

Reputation: 2878

You need to invoke the script.

$(document).foundation();

http://fiddle.jshell.net/7Rp5C/3/
See the jsfiddle example live here: http://fiddle.jshell.net/7Rp5C/3/show/

The provided CSS does not clear the floats when using vertical tabs in accordions

Just do to clear the floats:

.accordion .content { overflow: hidden; }

or

.accordion .content:before,  
 .content:after {  
  content: " ";  
  display: table;  
}  
.accordion .content:after {  
   clear: both;  
}

Upvotes: 1

Related Questions