 <p>The problem is that you have the same id for both accordions (<em>which is invalid html to start with</em>) which makes the plugin always match the first one.</p> <p>If you use classes it works fine</p> <pre><code>&lt;div class="accordion"&gt; &lt;h3&gt;Home&lt;/h3&gt; &lt;div class="accordion"&gt; &lt;h3&gt;Sub-Div1&lt;/h3&gt; &lt;div&gt; &lt;p&gt;This is a sub-div&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and</p> <pre><code>$(".accordion").accordion({ header: "&gt; h3:not(.item)", heightStyle: "content", active: false, collapsible: true }); </code></pre> <p>Demo at <a href="http://jsfiddle.net/gaby/xmq8xhvp/" rel="nofollow">http://jsfiddle.net/gaby/xmq8xhvp/</a></p>