Accordian menu 📝

hritik5102 · hritik5102 · commit 0bb6829e7334 · 2024-10-24T23:47:20.000+05:30
diff --git a/17-accordion-menu/index.html b/17-accordion-menu/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS - :focus-within pseudo class</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="main.js" defer></script>
+  </head>
+  <body>
+    <div class="accordian">
+      <!--  1st  -->
+      <div class="container">
+        <h3 class="title">Your Account</h3>
+        <p class="content">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </div>
+
+      <!--  2nd  -->
+      <div class="container">
+        <h3 class="title">Payment & Pricing</h3>
+        <p class="content">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </div>
+
+      <!--  3rd  -->
+      <div class="container">
+        <h3 class="title">Returns & Refunds</h3>
+        <p class="content">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/17-accordion-menu/main.js b/17-accordion-menu/main.js
@@ -0,0 +1,8 @@
+const containers = document.getElementsByClassName("container");
+
+// We can't directly apply forEach on the HTMLCollection, you have first convert them into an array
+Array.from(containers).forEach((container) => {
+  container.addEventListener("click", () => {
+    container.classList.toggle("is-active");
+  });
+});
diff --git a/17-accordion-menu/style.css b/17-accordion-menu/style.css
@@ -0,0 +1,66 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Lato&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Lato", Fira Code, monospace;
+}
+
+body {
+  background-color: lavenderblush;
+  margin: 0 40px;
+}
+
+.accordian {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 700px;
+  margin: 0 auto;
+}
+
+.container {
+  position: relative;
+}
+
+.container .title {
+  padding: 15px 24px;
+  background-color: rgb(217, 216, 255);
+  color: black;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  cursor: pointer;
+}
+
+.container .content {
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  height: 0px;
+  margin-bottom: 20px;
+  background-color: rgb(250, 250, 250);
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+    0 0 0 1px rgba(10, 10, 10, 0.02);
+
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  transition: all 0.3s ease-in-out;
+  overflow-y: auto;
+}
+
+.container .title::before {
+  content: "+";
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+}
+
+.container.is-active .content {
+  height: 80px;
+}
+
+.container.is-active .title::before {
+  content: "-";
+}
