I am trying to build a stacks of Bootstrap cards.
When cards are less than 10, then hide the load-more buttons.
When cards are more than 10, hide some of the cards(cards after 10 cards) - from 11th cards all cards, add css class (to hide the class).
And upon clicking the "Load-More" it should show another 10 cards - just remove the (hidden class from the cards). And hide the rest of the cards. Till now it will show 10 + 10(after click event) and hide rest of the cards(21 card onwards, to be revealed, by button click)
I can not implement this with Javascript.
If anyone can suggest any way for this. I am looking for helpful comment to fix this.
window.onload = multipleCards; function multipleCards(){ //first find all the footer stacks, then loop through, make buttons - hide - and load function var stackIndex = document.getElementsByClassName("footer-card"); var btnIndex = document.querySelectorAll(".d-grid .gap-4"); //loop for all footer stacks for(var i=0; i<stackIndex.length; i++){ var cardsNum = stackIndex[i].getElementsByClassName("col-6"); if(cardsNum.length <= 10){ btnIndex[i].querySelector(".btn").style.display = 'none'; } else { stackIndex[i].getElementsByClassName("col-6").classList.add("invisible"); btnIndex[i].querySelector(".btn").click.classList.remove("invisible"); } } }<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <h3>Footer card - I</h3> <div class="row footer-card"> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> </div> <div class="d-grid gap-4"> <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button> </div> <h3>Footer card - II</h3> <div class="row footer-card"> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> </div> <div class="d-grid gap-4"> <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button> </div> <h3>Footer card - III</h3> <div class="row footer-card"> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> </div> <div class="d-grid gap-4"> <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button> </div> <h3>Footer card - IV</h3> <div class="row footer-card"> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> <div class="col-6 card"><p>This is card</p></div> </div> <div class="d-grid gap-4"> <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button> </div> </body> </html>
没有评论:
发表评论