Databases
StackOverflow2013
Postsdbo
POCan't make foundation sections example work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't make foundation sections example work
    text
    copied!<p>I'm new to foundation and I'm trying to make some nice tabs with various content. To do so, I'm using <a href="http://foundation.zurb.com/docs/components/section.html" rel="nofollow noreferrer">their documentation</a>. However, it doesn't work like it's supposed to do. Averything works fine, except that that sections don't cover each other. Each section is placed after the other, even when the other is hidden. Here is an example :</p> <ol> <li><img src="https://i.stack.imgur.com/dhuSB.png" alt="First tab"></li> <li><img src="https://i.stack.imgur.com/qCyfQ.png" alt="Some other tab"></li> </ol> <p>As you can see, this is pretty ugly. Here is my code : </p> <pre><code>&lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;Test Page&lt;/title&gt; &lt;link rel="stylesheet" href="/autoPA/static/css/normalize.css" /&gt; &lt;link rel="stylesheet" href="/autoPA/static/css/foundation.css" /&gt; &lt;link rel="stylesheet" href="/autoPA/static/css/dynamease.css" /&gt; &lt;script src="/autoPA/static/js/vendor/custom.modernizr.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="section-container auto" data-section&gt; &lt;section&gt; &lt;p class="title" data-section-title&gt; &lt;a href="#panel1"&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="#panel2"&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; &lt;!-- Check for Zepto support, load jQuery if necessary --&gt; &lt;script&gt; document .write('&lt;script src=' + ('__proto__' in {} ? '/autoPA/static/js/vendor/zepto' : '/autoPA/static/js/vendor/jquery') + '.js&gt;&lt;\/script&gt;') &lt;/script&gt; &lt;script src="/autoPA/static/js/foundation.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).foundation(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Do you guys see anything wrong in it ? (Each file included is found, firebug doesn't detect any errors).</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