updated new tab

assets/js/script.js

@@ -210,7 +210,6 @@
 	/** GALLERY LIGHT BOX AND DYNAMIC SLIDER ENDS HERE */
 
 	/** CASE STUDY DETAIL */
-
 	$(function () {
 		// Handle click on TOC items
 		$(".case-study-general .category-list a[data-target]").on("click", function (e) {
@@ -263,4 +262,48 @@
 			}
 		});
 	})
+
+	/** CUSTOM FILTER */
+	$(function () {
+		$(".case-study-filter a").on("click", function (e) {
+			e.preventDefault();
+
+			$(".case-study-filter a").removeClass("active");
+			$(this).addClass("active");
+
+			const currentActive = $(this).data("filter"); // e.g. "design", "dev", etc.
+
+			// Show all items first
+			$(".case-study-listing .row > div").removeClass("d-none");
+
+			if (currentActive !== "") {
+				$(".case-study-listing .row > div").each(function () {
+					if (!$(this).hasClass(currentActive)) {
+						$(this).addClass("d-none");
+					}
+				});
+			}
+		});
+	});
+
+	/** CASE STUDY LOAD MORE */
+	$(function () {
+		$(".load-hidden-item").on("click", function (e) {
+			e.preventDefault();
+
+			var items = $(".case-study-listing .extra-item");
+			var isVisible = items.is(":visible");
+
+			if (isVisible) {
+				items.slideUp();
+				$(this).find("span").text("Load More");
+				$(this).parent().removeClass("show-less");
+			} else {
+				items.slideDown();
+				$(this).find("span").text("Show Less");
+				$(this).parent().addClass("show-less");
+			}
+		})
+	})
+
 })(jQuery);

dev/sass/pages/case-study/_case-study-filter.scss

+.case-study-filter {
+    ul {
+        margin-bottom: 0;
+        gap: 44px;
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+
+        li {
+            list-style-type: none;
+
+            a {
+                display: inline-block;
+                color: var(--white);
+                padding: 24px 0;
+                position: relative;
+                font-size: 16px;
+                line-height: 24px;
+                letter-spacing: -0.4px;
+
+                &::after {
+                    content: "";
+                    width: 16px;
+                    height: 16px;
+                    background-color: var(--white);
+                    transform: translateX(-50%) rotate(45deg);
+                    position: absolute;
+                    top: calc(100% - 8px);
+                    left: 50%;
+                    opacity: 0;
+                }
+
+                &.active {
+                    font-weight: 600;
+
+                    &::after {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

dev/sass/pages/case-study/_case-study-list.scss

@@ -48,8 +48,16 @@
 
             h4 {
                 margin-bottom: 4px;
+
+                &.dec {
+                    svg {
+                        transform: rotate(180deg);
+                    }
                 }
             }
+
+
+        }
     }
 
     &:hover {
@@ -75,10 +83,32 @@
     .row {
         --bs-gutter-y: 24px;
     }
+
+    .load-more-wrapper {
+        margin-top: 32px;
+
+        &.show-less {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .extra-item {
+        display: none;
+    }
 }
 
 @media (min-width:992px) {
     .case-study-listing {
         padding: 64px 0 132px;
+
+        .load-more-wrapper {
+            margin-top: 48px;
+
+            svg {
+                margin-left: 12px;
+            }
+        }
     }
 }
\ No newline at end of file

dev/sass/style.scss

@@ -70,4 +70,5 @@ $body-font: "Sora", sans-serif;
 @import "pages/case-study/case-study-banner";
 @import "pages/case-study/case-study-general";
 @import "pages/case-study/case-study-list";
+@import "pages/case-study/case-study-filter";
 @import "pages/milestone";
\ No newline at end of file