Reveal 3 items at a time with jQuery

JavaScript
1

I have a parent div within which there are a set of cards being displayed. Default is 6 cards, though there are 12 already rendered in the HTML (I hide the other 6).

I have a “Show More” link at the bottom of the default 6 cards. When the user clicks on this, it should display the next three, the user clicks again, it reveals the next three (previously hidden).

I’m at a loss for even where to begin. All I have is HTML and hope.

Here’s the markup.

<div class="lo-profile-cards">
     <div class="lo-profile-card">Card 1</div>
     <div class="lo-profile-card">Card 2</div>
     <div class="lo-profile-card">Card 3</div>
     <div class="lo-profile-card">Card 4</div>
     <div class="lo-profile-card">Card 5</div>
     <div class="lo-profile-card">Card 6</div>
     <div class="lo-profile-card">Card 7 - Hidden</div>
     <div class="lo-profile-card">Card 8 - Hidden</div>
     <div class="lo-profile-card">Card 9 - Hidden</div>
     <div class="lo-profile-card">Card 10 - Hidden</div>
     <div class="lo-profile-card">Card 11 - Hidden</div>
     <div class="lo-profile-card">Card 12 - Hidden</div>
     <a class="show-more-cards" "#">Show More (click once to reveal 7 - 9, click again to reveal 10 - 12</a>
</div>

No need for “Show Less”, but it would be great for Show less to work backwards - hide 3 at a time.
Thanks!

2

So you have 12 elements of the array of elements in the class “lo-profile-card”.
At the start of the page load, you have revealed 6.
On click, show 7-9. So now you have revealed 9.
On the same click event, show 10-12. So now you have revealed 12.

Translate the above paragraph into code.
If necessary, take the intermediate step. How would you code this in psuedo-code?

3

Hi there conradical,

here is one possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em sans-serif;
 } 
.lo-profile-cards {
	max-width: 40em;
	padding: 1em;
	margin: 1em auto;
	border: 1px solid #999;
	border-radius: 0.5em;
	background-color: #fff;
 }
.show-more-cards,
.show-less-cards {
	display: block;
	margin-top: 1em;
	color: #008;
    cursor: pointer;	
 }
.hide {
	display: none;
}
</style>

</head>
<body>
 <div class="lo-profile-cards">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
  <div>Card 5</div>
  <div>Card 6</div>
  <div class="hide">Card 7</div>
  <div class="hide">Card 8</div>
  <div class="hide">Card 9</div>
  <div class="hide">Card 10</div>
  <div class="hide">Card 11</div>
  <div class="hide">Card 12</div>
  <span class="show-more-cards">Show More (click once to reveal 7 - 9, click again to reveal 10 - 12)</span>
  <span class="show-less-cards hide">Show Less (click once to hide 12 - 10, click again to hide 9 - 7)</span>   
 </div>
<script>
(function(d) {
   'use strict';
    var c = 5, st, stop = 8,
      cnt = d.querySelector('.lo-profile-cards'),
      dvs = cnt.querySelectorAll('div'),
     but1 = d.querySelector('.show-more-cards'),
     but2 = d.querySelector('.show-less-cards');
      but1.addEventListener('click', function(){showmore(c)}, false );
      but2.addEventListener('click', function(){showless(dvs.length)}, false );
function showmore(c) {
   if ( c < stop){
        c ++;
        dvs[c].classList.remove( 'hide');
        st = setTimeout(
        	  function(){ 
        	  	showmore(c); 
        	  }, 500 );
      } 
   else {
  	    clearTimeout( st );
  	    stop = 11; 
 
   if ( c === stop ) {  	
  	    clearTimeout(st);
  	    stop = 9;
 	    but1.classList.add('hide');
 	    but2.classList.remove('hide');
 	  }
    }
 }

function showless(c) {
   if ( c > stop){
        c --;
        dvs[c].classList.add('hide');

        st = setTimeout(
        	  function(){
        		showless(c);
        	  }, 500 );
      } 
   else {
  	    clearTimeout(st);
  	    stop = 6; 
 
   if ( c === stop ){  	
  	    clearTimeout(st);
  	    stop = 8;
 	    but1.classList.remove('hide');
 	    but2.classList.add('hide');
 	  }
    }
 }
 
}(document));
</script>  

</body>
</html>

You may also take a peep at it here…

Full Page View:-
https://codepen.io/coothead/full/rNWwaab

coothead

5 Likes
5

Woah! Perfect.

6

Awesome code there. It works similarly to the code I have on my blog archive, where you click the button to the years, and it reveals the months, then click the months, and it reveals the blog entries :slight_smile: .

1 Like