diff --git a/index.html b/index.html index 6d3f4d2..ee39d73 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ Ui-Component-Load More (Static Content) + @@ -23,7 +24,7 @@
10
11
12
- Load More +

Load More

diff --git a/loadMoreScript.js b/loadMoreScript.js index 873aab7..54599f3 100644 --- a/loadMoreScript.js +++ b/loadMoreScript.js @@ -5,33 +5,35 @@ document.addEventListener("DOMContentLoaded", function () { if (divs.length != 0 && divs.length > 6) { for (let i = 6; i < divs.length; i++) { - // divs[i].classList.add("fadeInUp"); divs[i].classList.toggle('hiddenContent'); } } const elToLoad = document.getElementById("loadmore"); - elToLoad.addEventListener("click", () => { + elToLoad.addEventListener("click", (e) => { + e.preventDefault(); var hiddenDivs = document.querySelectorAll(".hiddenContent"); const items = hiddenDivs.length; + elToLoad.scrollIntoView(); if (items == 0) { elToLoad.innerText = 'No More Content'; - elToLoad.removeAttribute('href'); } else if (items != 0 && items > 3) { for (let i = 0; i < 3; i++) { hiddenDivs[i].classList.toggle('hiddenContent'); + hiddenDivs[i].classList.add("animated", "fadeInUp"); } } else { for (let i = 0; i < items; i++) { hiddenDivs[i].classList.toggle('hiddenContent'); + hiddenDivs[i].classList.add("animated", "fadeInUp"); } } diff --git a/styles.css b/styles.css index d59076c..1c5e2e0 100644 --- a/styles.css +++ b/styles.css @@ -8,10 +8,13 @@ justify-content: space-evenly; flex-wrap: wrap; align-items: center; + scroll-behavior: smooth; } -.container>a { - flex: 1 0 100%; +.container>p { + flex: 1 0 50%; + cursor: pointer; + text-decoration: underline; } .box {