"Show more/less" button added.

iscRamirezAbril · Aug 18, 2024 · 9097664 · 9097664
1 parent 3b8afd5
commit 9097664
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -714,6 +714,10 @@ h3.my-profession {
 /* -------------------------------------------------------------------------- */
 /*                              PORTFOLIO SECTION                             */
 /* -------------------------------------------------------------------------- */
+.portfolio-item.hidden {
+    display: none;
+}
+
 .portfolio .container {
     padding-bottom: 40px;
 }

diff --git a/index.html b/index.html
@@ -509,7 +509,7 @@ <h2>Portfolio</h2>
                     </div>
                 </div>
 
-                <div class="row">
+                <div class="row portfolio-list">
                     <!-- portfolio item start -->
                     <div class="portfolio-item padd-15">
                         <div class="portfolio-item-inner shadow-dark">
@@ -785,6 +785,13 @@ <h4>ARK Nexus</h4>
                     </div>
                     <!-- portfolio item end -->
                 </div>
+
+                <!-- "Show more/less" button -->
+                <div class="row">
+                    <div class="padd-15">
+                        <button id="show-more-btn" class="btn">Show more</button>
+                    </div>
+                </div>
             </div>
         </section>
         <!-- PORTFOLIO SECTION END -->

diff --git a/js/script.js b/js/script.js
@@ -93,4 +93,41 @@ document.querySelectorAll(".certification-item").forEach(item => {
 
 document.querySelector(".popup-img span").onclick = () => {
     document.querySelector(".popup-img").style.display = 'none';
-}
+}
+
+/* -------------------------- "Show more" & "Show less" button ------------------------- */
+document.addEventListener("DOMContentLoaded", function () {
+    const projects = document.querySelectorAll('.portfolio-item');
+    const showMoreBtn = document.getElementById('show-more-btn');
+    let itemsToShow = 6;
+
+    projects.forEach((project, index) => {
+        if (index >= itemsToShow) {
+            project.classList.add('hidden');
+        }
+    });
+
+    showMoreBtn.addEventListener('click', function () {
+        const hiddenProjects = document.querySelectorAll('.portfolio-item.hidden');
+
+        if (hiddenProjects.length > 0) {
+            hiddenProjects.forEach((project, index) => {
+                if (index < itemsToShow) {
+                    project.classList.remove('hidden');
+                }
+            });
+
+            if (document.querySelectorAll('.portfolio-item.hidden').length === 0) {
+                showMoreBtn.textContent = 'Show less';
+            }
+        } else {
+            projects.forEach((project, index) => {
+                if (index >= itemsToShow) {
+                    project.classList.add('hidden');
+                }
+            });
+
+            showMoreBtn.textContent = 'Show more';
+        }
+    });
+});