title: Javascript hide show a div if parent div has more than 4 anchor elements
body: <p>The problem I have is that I want to detect if there are more than 4 anchor elements in a div ('.tile__list' in the example). If yes then I want to display another div (saying "MORE"), if the div contains less than 5 anchor elements then the "MORE"-div should be hidden.</p>
  
  <p>I got it to work already with an easy example, but since I implemented drag and drop now, it needs to check the length after dropping an element, too :-/</p>
  
  <p>Here my code example:</p>
  
  <pre><code>       &lt;div class="tile"&gt; &lt;!-- START 1st tile --&gt;
         &lt;div class="tile__name"&gt;&lt;/div&gt;
         &lt;button class="tile__more"&gt;more&lt;/button&gt;
          &lt;div class="tile_list_wrapper" data-force="70"&gt;
                  &lt;div class="tile__list"&gt;
        &lt;a class="quickmark" href="https://google.com"&gt;
         &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
        &lt;/a&gt;
       &lt;a class="quickmark" href="https://google.com"&gt;
         &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
       &lt;/a&gt;
       &lt;a class="quickmark" href="https://google.com"&gt;
         &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
       &lt;/a&gt;
       &lt;a class="quickmark" href="https://google.com"&gt;
         &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
       &lt;/a&gt;
              &lt;/div&gt; &lt;!-- tile list--&gt;
             &lt;/div&gt; &lt;!-- tile_list_wrapper--&gt; 
   &lt;/div&gt; &lt;!-- END 1st tile --&gt;
  
  
  
   &lt;div class="tile"&gt; &lt;!-- START 2nd tile --&gt;
      &lt;div class="tile__name"&gt;&lt;/div&gt;
      &lt;button class="tile__more"&gt;more&lt;/button&gt;
      &lt;div class="tile_list_wrapper" data-force="70"&gt;
          &lt;div class="tile__list"&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
           &lt;/a&gt;
           &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
          &lt;/a&gt;
          &lt;a class="quickmark" href="https://google.com"&gt;
        &lt;img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Wikipedia-logo-v2-en.svg"&gt;&lt;/img&gt;
          &lt;/a&gt;
                  &lt;/div&gt; &lt;!-- tile list--&gt;
                 &lt;/div&gt; &lt;!-- tile_list_wrapper--&gt; 
      &lt;/div&gt; &lt;!-- tile --&gt;
  </code></pre>
  
  <p>and my JS (did the job before :-/):</p>
  
  <pre><code>  $('.tile__list').each(function() {
           var $this = $(this);
           if ($this.children('a').length &gt; 4) { //length of item list
  
              $(this).next('.tile__more').show();
           }
           else if ($this.children('a').length &lt; 5) { //length of item list
  
              $(this).next('.tile__more').hide();
           }
  
        });
  </code></pre>
  
  <p>I set up a Fiddle...easier to see there -> <a href="http://jsfiddle.net/Bws3t/3/" rel="nofollow">http://jsfiddle.net/Bws3t/3/</a></p>
  
  <p>I'd really be happy if someone could help me out...been searching for a solution for hrs!
  thx</p>