Creating an accordion in jQuery
<p>I am trying to create an accordion using the following jQuery:</p>

<pre><code> var allPanels = $('.accordion &gt; div.showlist &gt; p.showdetails').hide();

  $('.accordion &gt; div.showlist &gt; strong').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;div class="accordion"&gt;
 &lt;div class="showlist"&gt;
  &lt;div class="showdate"&gt;date&lt;/div&gt;
  &lt;strong&gt;The title&lt;/strong&gt;
  &lt;p class="showdetails"&gt;There is more info in here about the show here.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="showlist"&gt;
  &lt;div class="showdate"&gt;date&lt;/div&gt;
  &lt;strong&gt;The title&lt;/strong&gt;
  &lt;p class="showdetails"&gt;There is more info in here about the show here.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="showlist"&gt;
  &lt;div class="showdate"&gt;date&lt;/div&gt;
  &lt;strong&gt;The title&lt;/strong&gt;
  &lt;p class="showdetails"&gt;There is more info in here about the show here.&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The <code>p.showdetails</code> are being hidden fine, but when <code>strong</code> is clicked nothing happens. Any idea what I am doing wrong?</p>
