How to show/hide certain number of divs using a single button?

Question

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

Here's a jsfiddle.

jQuery:

var vidThumbnail = "";
var elements = $('.section.thumbnail .thumb > .video-thumbnail');

for (i = 0; i < 25; i++) // loop thru 25 thumbnails
{
    vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>';
    $('.section.thumbnail .thumb').append(vidThumbnail);
    if(i > 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
});

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — showdev, May 16 '16 at 17:10

score 2 · Accepted Answer · answered May 16 '16 at 17:30

2

I've fixed a bit your code because you do some mistakes. Look here: https://jsfiddle.net/sbz51wdz/36/

I explain your error:

When you define a click action, jQuery add an event on a matched DOM elements. If you simply change the id attribute and attach another event of that new ID before the action of changing ID was started, jQuery will not find anything with the new ID. My favourite solution is add the click event on single element with a fixed class or id. Inside the function, everytime, check if the element has or not a class, and then do the right action. Just use somenthing like $(this).hasClass(...)
After this, is better to define single function called when it needs.
Last but not least, it's important to attach assignments after the context is defined in the DOM. so var elements = $('.section.thumbnail .thumb > .video-thumbnail'); this have to be written after the foreach cycle that generate the elements.

Hope its help! :)

answered May 16 '16 at 17:30

Daniele Petrarolo

438
4
8

Thanks for the explanation! This works for one but suppose I had multiple sections with different class name, but `.thumb .video-thumbnail` the same. To avoid using a specific selector as `.section.thumbnail`, how would I do that? I tried using `if($(this).parent('.section.thumbnail')) { $('.thumb .video-thumbnail').show(); }`, but it targets all the others with it, not the specific `.section.thumbnail2` for instance. – TheAmazingKnight May 16 '16 at 20:22
I solved it by adding `if($(this).parent('.section.thumbnail')){$('.section.thumbnail .thumb .video-thumbnail').show(); // triggers selected section}`. Thank you for your input! – TheAmazingKnight May 17 '16 at 12:27
Exactly. Enjoy! :) – Daniele Petrarolo May 17 '16 at 15:56

score 0 · Answer 2 · answered May 16 '16 at 17:29

0

You are changing the id of the div on click so should use $(document) and bind all ids with that like

$(document).on('click', '#loadMore', function()

https://jsfiddle.net/sbz51wdz/35/

answered May 16 '16 at 17:29

Thorin

2,004
1
19
30

score 0 · Answer 3 · answered May 16 '16 at 21:04

I have created a div class name "test" and put the loadMore div inside it for binding. You need it cause a hidden or invisible div need to bind in every event occurrence in jquery. then i modified the jquery code in this below way and it works.

var vidThumbnail = "";
var elements = $('.section.thumbnail .thumb > .video-thumbnail');

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

$('.test').on('click', '#loadMore', 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
});

$('.test').on('click', '#showLess', function()
{

    // slice the first five, hide the rest
    var j = 6;
    $('.section.thumbnail .thumb .video-thumbnail').each(function(i)
    {
      $('.section.thumbnail .thumb .video-thumbnail').eq(j).hide();
      j++;
    });
    $(this).attr('id', 'loadMore'); // change id to show less
    $(this).text('Load More...'); // change text value
});

How to show/hide certain number of divs using a single button?

3 Answers3