How to show/hide certain number of divs using a single button?
<p>I have elements that should show or hide after the first five elements. When I click on 'Load More...' with an id <code>#loadMore</code>, it will trigger to show all the elements and change the div id to <code>#showLess</code> to execute a different set of action. So, when I click <code>#showLess</code> to hide the rest of the thumbnails, nothing happens. The <code>$('#showLess').click(function()</code> isn't executing but instead executes the <code>$('#loadMore').click(function()</code> again.</p>

<p>Here's a <a href="https://jsfiddle.net/TheAmazingKnight/sbz51wdz/3/" rel="nofollow">jsfiddle</a>.</p>

<p><strong>jQuery:</strong></p>

<pre><code>var vidThumbnail = "";
var elements = $('.section.thumbnail .thumb &gt; .video-thumbnail');

for (i = 0; i &lt; 25; i++) // loop thru 25 thumbnails
{
    vidThumbnail = '&lt;div class="video-thumbnail"&gt;child ' + i + '&lt;/div&gt;';
    $('.section.thumbnail .thumb').append(vidThumbnail);
    if(i &gt; 5) // when it reaches the first five thumbnails, hide the rest
     $('.section.thumbnail .thumb .video-thumbnail').eq(i).hide();
}

$('#loadMore').click(function() // show them all
{
    $('.section.thumbnail .thumb .video-thumbnail').show();
    $(this).attr('id', 'showLess'); // change id to show less
    $(this).text('Show Less...'); // change text value
});

$('#showLess').click(function()
{
    // slice the first five, hide the rest
    $(elements).slice(5).each(function(i)
    {
      $('.section.thumbnail .thumb .video-thumbnail').eq(i).hide();
    });
    $(this).attr('id', 'loadMore'); // change id to show less
    $(this).text('Load More...'); // change text value
});
</code></pre>