Hide/Show elements with jQuery
<p>I have following site structure</p>

<pre><code>&lt;div id="movies"&gt;

     &lt;a href=""&gt;
         &lt;div&gt;content&lt;/div&gt;
     &lt;/a&gt; 
     &lt;a href=""&gt;
         &lt;div&gt;content&lt;/div&gt;
     &lt;/a&gt;
     ...    

&lt;/div&gt;
</code></pre>

<p>There can be up to 50 <code>a tags</code> inside <code>#movies</code>. I want to show only 10 and reveal another
10 if the user requests it.</p>

<p>So I came up with following jquery code.</p>

<pre><code>   var count = $("#movies a").length;

   if(count &gt; 10){
       for(i = 11; i &lt;= count; i++){
          $('#movies a:nth-child('+i+')').hide();   
       }
       $('#more').append('&lt;a&gt;show more&lt;/a&gt;');
   }

   $('#more a').click(function(){
       var hidden = $("#movies a").filter(":hidden");

       var count = 0;
       for(element in hidden){
           if(count &lt;= 10){
               element.show();
           }
       }
   });
</code></pre>

<p>But this gives me <code>Uncaught TypeError: Object 0 has no method 'show'</code>. Any ideas why? What do I need to change/add to make the idea work?</p>
