Added Card Styled Accordion (#1468)

Rakesh9100 · Feb 18, 2025 · a6f9819 · a6f9819
1 parent 576c42a
commit a6f9819
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 0 deletions.
diff --git a/Components/Accordions/Card-Styled-Accordion/index.html b/Components/Accordions/Card-Styled-Accordion/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Card Styled Accordion</title>
+</head>
+<body>
+    <main class="container">
+        <h1 class="title">Beautiful Card Accordion</h1>
+        <div class="accordion">
+            <div class="accordion-item">
+                <button class="accordion-trigger">What is this accordion about?</button>
+                <div class="accordion-content">
+                    <p>This accordion showcases a beautiful and aesthetic card-styled design, combining the functionality of an accordion with the visual appeal of cards.</p>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <button class="accordion-trigger">How is it styled?</button>
+                <div class="accordion-content">
+                    <p>It's styled using CSS with custom gradients, shadows, and animations to create a visually pleasing and interactive experience.</p>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <button class="accordion-trigger">Is it responsive?</button>
+                <div class="accordion-content">
+                    <p>Yes, this accordion is fully responsive and will look great on devices of all sizes, from mobile phones to desktop computers.</p>
+                </div>
+            </div>
+            <div class="accordion-item">
+                <button class="accordion-trigger">Can I customize it further?</button>
+                <div class="accordion-content">
+                    <p>You can easily modify the colors, add more items, or adjust the animations to suit your specific needs and preferences.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script defer src="script.js"></script>
+</body>
+</html>
diff --git a/Components/Accordions/Card-Styled-Accordion/script.js b/Components/Accordions/Card-Styled-Accordion/script.js
@@ -0,0 +1,17 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const accordionTriggers = document.querySelectorAll(".accordion-trigger");
+
+    accordionTriggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+            const parent = trigger.parentElement;
+            parent.classList.toggle("active");
+
+            // Close other accordions
+            document.querySelectorAll(".accordion-item").forEach((item) => {
+                if (item !== parent) {
+                    item.classList.remove("active");
+                }
+            });
+        });
+    });
+});
diff --git a/Components/Accordions/Card-Styled-Accordion/style.css b/Components/Accordions/Card-Styled-Accordion/style.css
@@ -0,0 +1,76 @@
+/* General Styling */
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to bottom right, #f3e8ff, #dbeafe);
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+/* Container */
+.container {
+    max-width: 600px;
+    width: 100%;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Title */
+.title {
+    text-align: center;
+    font-size: 24px;
+    color: #4f46e5;
+    margin-bottom: 20px;
+}
+
+/* Accordion */
+.accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.accordion-item {
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Accordion Button */
+.accordion-trigger {
+    width: 100%;
+    background: #ffffff;
+    color: #4f46e5;
+    font-size: 18px;
+    text-align: left;
+    padding: 15px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: background 0.3s, color 0.3s;
+}
+
+.accordion-trigger:hover {
+    background: #eef2ff;
+}
+
+/* Accordion Content */
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    padding: 0 15px;
+    background: white;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+/* Show content when active */
+.accordion-item.active .accordion-content {
+    max-height: 200px;
+    padding: 15px;
+}
diff --git a/assets/json_files/accordions.json b/assets/json_files/accordions.json
@@ -4,6 +4,11 @@
         "previewLink": "../../Components/Accordions/3D-Accordion/index.html",
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Accordions/3D-Accordion"
     },
+    {
+        "title": "Card Styled Accordion",
+        "previewLink": "../../Components/Accordions/Card-Styled-Accordion/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Accordions/Card-Styled-Accordion"
+    },
     {
         "title": "Glassmorphism Accordion",
         "previewLink": "../../Components/Accordions/Glassmorphism-Accordion/index.html",