Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://jsfiddle.net/bG52W/3/" rel="nofollow">http://jsfiddle.net/bG52W/3/</a></p> <p>Even if all your code was right. It would have never worked in the jfiddle. You didn't check jQuery UI on the left.</p> <p>Other than that your structure was a bit wrong:</p> <blockquote> <p>The markup of your accordion container needs pairs of headers and content panels:</p> </blockquote> <p><a href="http://api.jqueryui.com/accordion" rel="nofollow">http://api.jqueryui.com/accordion</a></p> <pre><code>&lt;div class="accordion"&gt; &lt;h1&gt;&lt;a href="#"&gt;work&lt;/a&gt;&lt;/h1&gt; &lt;div class="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#section1"&gt;&lt;p class="nav_p"&gt;anatomy of type&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section2"&gt;&lt;p&gt;clash album redesign&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section3"&gt;&lt;p&gt;"ghost" book jacket&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section4"&gt;&lt;p&gt;charlie chaplin&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section5"&gt;&lt;p&gt;design influence&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section6"&gt;&lt;p&gt;"thrift thoughts" zine&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section7"&gt;&lt;p&gt;cigarette card illustration&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#section8"&gt;&lt;p&gt;"frosty" winecooler packaging&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;h1&gt;&lt;a href="#"&gt;about&lt;/a&gt;&lt;/h1&gt; &lt;div&gt;&lt;a href="#"&gt;&lt;h1&gt;about&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt; &lt;h1&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/h1&gt; &lt;div&gt;&lt;a href="#"&gt;&lt;h1&gt;contact&lt;/h1&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Also like the voice said, your selector was wrong.</p> <pre><code>$(function () { $(".accordion").accordion({ collapsible: true }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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