0

Update to include basic Fiddle: http://jsfiddle.net/g28nc89t/1/

Say I have a set of divs using a repeating pattern, not an unordered list, that follows this structure:

<div class="one cards">
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
</div>

<div class="two cards">
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
    <div class="random_cms-class"><div class="card">...</div></div>
</div>

Using jQuery, how can I hide every 'card' after the third item and create a toggle to show/hide the hidden cards. Considering the card UI utlizes the same class, I do not want the toggle to show/hide all card blocks only the cards for that section. I can add id's or more specific classes to each card block.

I'm working with the following js, which is currently toggling every card instance vs only toggling for that section. It also flip flops the Show More and Show Less between the two blocks:

$('.cards').each(function(){
    var max = 2
    if ($(this).find(".card").length > max) {
        $(this)
            .find('.card:gt('+max+')')
            .hide()
            .end()
            .append(
                $('<div class="toggle"><a class="more">Show More</a></div>').click( function(){
                $('.card:gt('+max+')').toggle();
                    if ( $('.more').length ) {
                        $(this).html('<a class="less">Show Less</a>');
                    }  else {
                        $(this).html('<a class="more">Show More</a>');
                    };
                 })
             );
    }
});

The site is responsive and while I'd like to have some kind of slideup / slidedown animation I don't think it's practical in this scenario. Any help would greatly be appreciated. I tried using this stack as a guide: Jquery, hide & show list items after nth item

Community
  • 1
  • 1
Ken
  • 368
  • 3
  • 11

1 Answers1

0

You can use jQuery's slice() to grab all the elements past the third one and hide them. Keep in mind that all these elements will still be downloaded to the browser, so if the user doesn't expand them, they are hidden from view and essentially wasted effort. A better solution may be to load only the first three cards and then use an ajaxy load to load the rest if needed.

Here's how you could do what you ask:

http://codepen.io/anon/pen/Qwmvmx

$( document ).ready(function() {
  cards = $('.cards');
  $.each(cards, function(key,value) {
    $(this)
      .find('.random_cms-class')
      .slice(3)
      .hide(); 
  });
  $('.show_more').show();
});

$('.show_more a').click(function() {
  $(this).parent().parent().find(":hidden").show();
});
                  
.random_cms-class {
  display: inline-block;  
}

.card {
  width: 75px;
  height: 75px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="show_more">
      <a href="#">Show all...</a>
    </div>
</div>
<div class="two cards">
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="random_cms-class">
      <div class="card">...</div>
    </div>
    <div class="show_more">
      <a href="#">Show all...</a>
    </div>
</div>
JustinParker
  • 628
  • 6
  • 13
  • I don't think this will work for this scenario, since there are multiple card wrappers on the page. I added a basic fiddle above to try and clarify. All of the elements will be loaded no matter what since it's through a CMS. There might be 5 there might be 10 depending on many cards the user as created. – Ken Feb 18 '15 at 18:50
  • Updated to handle multiple groups. – JustinParker Feb 18 '15 at 20:31
  • This is awesome, thank you! As the show/hide toggle doesn't exist on the page. Can this be modified to use .append() with a Show More / Show less toggle using .html? Sorry for newbie questions, your help is really appreciated. – Ken Feb 18 '15 at 21:48
  • @Ken - no need to use append() as far as I can see. Here's how I would work the logic behind the show/hide button: When the show button is clicked, show the hidden cards, then change the show button to a hide button. When the hide button is clicked, hide the extra cards again like we do on the document ready function, and then change the hide button to a show button. I've updated that codepen link to do this, but this is just one of many solutions you could use. – JustinParker Feb 18 '15 at 22:13