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