How to load more or show less div/cards on button click without using jquery

Question

I have a working code for this requirement in jquery which displays the specified number of cards/divs and loads more or loads less rows when I click on show more and show less buttons.

I need to use core javascript and I'm not able to achieve it in core javascript.

Here is my fully working jquery code with demo:

var rowslength = 5;
size_timelinediv = $("#timeline t").length;
console.log(size_timelinediv)//prints 11
var x = 3; //number of cards to be displayed
if (rowslength < 4) {
    $("#loadMoreprodDiv").hide();
 
  }
  if (x == 3) {
    //alert(rowslength)
    $("#showlessprodDiv").hide();
   
  }
  $("#timeline t:lt(" + x + ")").show();
  $("#loadMoreprodDiv").click(function () {
    x = (x + 5 <= size_timelinediv) ? x + 5 : size_timelinediv;
    $("#timeline t:lt(" + x + ")").show();
    $("#showlessprodDiv").show();
    
    if (x == size_timelinediv) {
      $("#loadMoreprodDiv").hide();
    }
  });
  $("#showlessprodDiv").click(function () {
    x = (x - 5 <= 3) ? 3 : x - 5;
    $("#timeline t").not(":lt(" + x + ")").hide();
    $("#loadMoreprodDiv").show();
    $("#showlessprodDiv").show();
  
    if (x == 3) {
      $("#showlessprodDiv").hide();
      
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline" id="timeline" >
<t style="display:none"><div>Hi</div></t>
<t style="display:none"><div>Hello</div></t>
<t style="display:none"><div>How</div></t>
<t style="display:none"><div>Are</div></t>
<t style="display:none"><div>You</div></t>
<t style="display:none"><div>I'm</div></t>
<t style="display:none"><div>really</div></t>
<t style="display:none"><div>Good</div></t>
<t style="display:none"><div>x</div></t>
<t style="display:none"><div>y</div></t>
<t style="display:none"><div>z</div></t>
</div>
<button id="loadMoreprodDiv" class='loadMore'>View More Details</button><button id="showlessprodDiv" class='showLess'>View Less Details</button>

Now as per the requirement I need to convert this jquery code to core javascript :

This is what I tried :

size_timelinediv = document.getElementById("timeline").querySelectorAll("t").length;
console.log(size_timelinediv)//prints 11
var x = 3;//number of cards to be displayed

document.getElementById("timeline").querySelectorAll("t:lt(" + x + ")").style.display = "block"; //this doesn't work

But this doesn't work. It gives the following error :

"Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': 't:lt(3)' is not a valid selector."

Also I'm not sure how to achieve this line of code :

 $("#timeline t").not(":lt(" + x + ")").hide();

in core javascript. How do I achieve the same functionality using core javascript?

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline" id="timeline" >
<t style="display:none"><div>Hi</div></t>
<t style="display:none"><div>Hello</div></t>
<t style="display:none"><div>How</div></t>
<t style="display:none"><div>Are</div></t>
<t style="display:none"><div>You</div></t>
<t style="display:none"><div>I'm</div></t>
<t style="display:none"><div>really</div></t>
<t style="display:none"><div>Good</div></t>
<t style="display:none"><div>x</div></t>
<t style="display:none"><div>y</div></t>
<t style="display:none"><div>z</div></t>
</div>
<button id="loadMoreprodDiv" class='loadMore'>View More Details</button><button id="showlessprodDiv" class='showLess' style="display:inline-block">View Less Details</button>

<script>
var rowslength = 5;
size_timelinediv = document.querySelectorAll("#timeline t").length;
console.log(size_timelinediv)//prints 11
var x = 3; //number of cards to be displayed
if (rowslength < 4) {
   // $("#loadMoreprodDiv").hide();
 		document.querySelector("#loadMoreprodDiv").style.display = "none";
  }
  if (x == 3) {
    //alert(rowslength)
    //$("#showlessprodDiv").hide();
    document.querySelector("#showlessprodDiv").style.display = "none";
   
  }
  showOnly(document.querySelectorAll("#timeline t"),x);
  
  document.getElementById("loadMoreprodDiv").onclick =  function () {
    x = (x + 5 <= size_timelinediv) ? x + 5 : size_timelinediv;
   showOnly(document.querySelectorAll("#timeline t"),x);
    //$("#showlessprodDiv").show();
    document.querySelector("#showlessprodDiv").style.display = "block";
    
    if (x == size_timelinediv) {
      //$("#loadMoreprodDiv").hide();
      document.querySelector("#loadMoreprodDiv").style.display = "none";
    }
  }
  
  
  document.getElementById("showlessprodDiv").onclick = function () {
    x = (x - 5 <= 3) ? 3 : x - 5;
    showOnly(document.querySelectorAll("#timeline t"),x);
    document.querySelector("#loadMoreprodDiv").style.display = "block";
    document.querySelector("#showlessprodDiv").style.display = "block";
    //$("#loadMoreprodDiv").show();
    //$("#showlessprodDiv").show();
  
    if (x == 3) {
      document.querySelector("#showlessprodDiv").style.display = "none";
      //$("#showlessprodDiv").hide();
      
    }
  }
  
  function showOnly(nodeList, index) {
     for (i = 0; i < nodeList.length; i++ ) {
       nodeList[i].style.display = i<index ? "block": "none";
     }
	}

</script>

It seems, pure js does not recognise "lt"(less than) usage. So I wrote this helper function to show elements upto a specific index in a node list.

function showOnly(nodeList, index) {
 for (i = 0; i < nodeList.length; ++i ) {
   nodeList[i].style.display = i<index ? "block": "none";
 }
}

The following statement shows only the first 3 elements and hides the remaining from the list of elements returned by the selector.

showOnly(document.querySelectorAll("#timeline t"),3);