Databases
StackOverflow2013
Postsdbo
POusing accordion inside tabs on foundation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POusing accordion inside tabs on foundation
    text
    copied!<p>I'm working with Zurb Foundation 4 (latest release) and I'm trying to make a layout with a tabs , and each tab contains a section with accordion layout. <a href="http://foundation.zurb.com/docs/components/section.html" rel="nofollow noreferrer">foundation sections docs and examples</a></p> <p>Tabs:</p> <pre><code>&lt;div class="section-container tabs" data-section="tabs"&gt; &lt;section&gt; &lt;p class="title" data-section-title&gt;&lt;a href="#"&gt;Section 1&lt;/a&gt;&lt;/p&gt; &lt;div class="content" data-section-content&gt; &lt;p&gt;First Accordion-ed content goes here.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;section&gt; &lt;p class="title" data-section-title&gt;&lt;a href="#"&gt;Section 2&lt;/a&gt;&lt;/p&gt; &lt;div class="content" data-section-content&gt; &lt;p&gt;Second Accordion-ed content goes here.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt; </code></pre> <p>Accordion:</p> <pre><code>&lt;div class="section-container accordion" data-section="accordion"&gt; &lt;section&gt; &lt;p class="title" data-section-title&gt;&lt;a href="#"&gt;Section 1&lt;/a&gt;&lt;/p&gt; &lt;div class="content" data-section-content&gt; &lt;p&gt;Content of section 1.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;section&gt; &lt;p class="title" data-section-title&gt;&lt;a href="#"&gt;Section 2&lt;/a&gt;&lt;/p&gt; &lt;div class="content" data-section-content&gt; &lt;p&gt;Content of section 2.&lt;/p&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt; </code></pre> <p>The result I see, is each section (tabs o accordion) is always a tab, and broken behavior.</p> <p>This isnt related with this other <a href="https://stackoverflow.com/questions/13746793/zurb-foundation-accordion-nested-inside-accordion">question</a></p> <p>I can see the example of tabs containing tabs, but no one with mixed sections (tabs with vertical-nav, or accordion with horizontal-nav, for example).</p> <p>Can anyone make it work? If possible without using other tools outisde of the foundation framework.</p> <p>Thanks ind advance.</p> <p>Edit:</p> <p>Please feel free to reply here or <a href="https://groups.google.com/d/topic/foundation-framework-/nLcQEU8KHvM/discussion" rel="nofollow noreferrer">here</a> I'll cross link the correct response.</p> <p>Edit 2: Found already submitted issue at <a href="https://github.com/zurb/foundation/issues/2332" rel="nofollow noreferrer">GitHub</a> unresolved.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload