CODEWITHSUNDEEP
javascriptjqueryeach
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

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

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
});

Upvotes: 0

Views: 390

Answers (3)

Asif Uddin
Asif Uddin

Reputation: 409

  1. 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
});

Upvotes: 0

Daniele Petrarolo
Daniele Petrarolo

Reputation: 458

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! :)

Upvotes: 2

Thorin
Thorin

Reputation: 2034

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/

Upvotes: 0

Related Questions