Custom Accordian Code Implementation

February 3, 2025 · AI Conversations

User
Assistant
Here’s the CSS and JavaScript for your custom accordion to ensure it functions smoothly and looks good:

### **CSS (styles for accordion functionality and design)**

.custom-accordian-container {
    max-width: 800px;
    margin: auto;
}

.custom-accordian .accordion-item {
    border-bottom: 1px solid #ddd;
}

.custom-accordian .accordion-header {
    background: #f8f8f8;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-accordian .accordion-header img {
    max-width: 24px;
    height: auto;
    margin-left: 10px;
}

.custom-accordian .accordion-content {
    display: none;
    padding: 15px;
    background: #fff;
    border-left: 3px solid #0073aa;
}

.custom-accordian .accordion-item.active .accordion-content {
    display: block;
}

.custom-accordian .accordion-item.active .accordion-header {
    background: #0073aa;
    color: #fff;
}

—

### **JavaScript (toggle accordion functionality smoothly)**

document.addEventListener("DOMContentLoaded", function () {
    let accordions = document.querySelectorAll(".custom-accordian .accordion-header");

    accordions.forEach((accordion) => {
        accordion.addEventListener("click", function () {
            let parent = this.parentElement;
            let content = parent.querySelector(".accordion-content");

            // Toggle class for active state
            parent.classList.toggle("active");

            // Show/hide content with smooth transition
            if (parent.classList.contains("active")) {
                content.style.display = "block";
            } else {
                content.style.display = "none";
            }
        });
    });
});

—

### **How This Works:**
– **CSS**: Provides basic styling, smooth transitions, and an active state highlight.
– **JS**: Toggles the active state and shows/hides the content when an accordion header is clicked.

Would you like to add animation to the accordion expansion? 🚀

User
document.addEventListener("DOMContentLoaded", function () {
let accordions = document.querySelectorAll(".custom-accordian .accordion-header");

accordions.forEach((accordion) => {
accordion.addEventListener("click", function () {

let parent = this.parentElement;
let content = parent.querySelector(".accordion-content");

// Toggle class for active state
parent.classList.toggle("active");

// Show/hide content with smooth transition
if (parent.classList.contains("active")) {
content.style.display = "block";
} else {
content.style.display = "none";
}
});
});
});
hide other opened

Assistant
Here’s an improved version of your JavaScript that ensures only one accordion item is open at a time. When a new accordion item is clicked, it will close any other opened items.

### **Updated JavaScript (Close Other Opened Items)**

document.addEventListener("DOMContentLoaded", function () {
    let accordions = document.querySelectorAll(".custom-accordian .accordion-header");

    accordions.forEach((accordion) => {
        accordion.addEventListener("click", function () {
            let parent = this.parentElement;
            let content = parent.querySelector(".accordion-content");

            // Close all other accordion items
            document.querySelectorAll(".custom-accordian .accordion-item").forEach((item) => {
                if (item !== parent) {
                    item.classList.remove("active");
                    item.querySelector(".accordion-content").style.display = "none";
                }
            });

            // Toggle current accordion item
            parent.classList.toggle("active");
            content.style.display = parent.classList.contains("active") ? "block" : "none";
        });
    });
});

### **How It Works:**
✔️ When an accordion header is clicked, it:
– **Closes** any other opened accordion items.
– **Opens/Closes** the clicked one accordingly.

Would you like a smooth slide-down animation as well? 🚀

User
make some transition
Assistant
Here’s an improved version of your accordion with a **smooth slide-down and slide-up transition** using CSS and JavaScript.

—

### **Updated CSS (Smooth Transition Effect)**

.custom-accordian-container {
    max-width: 800px;
    margin: auto;
}

.custom-accordian .accordion-item {
    border-bottom: 1px solid #ddd;
}

.custom-accordian .accordion-header {
    background: #f8f8f8;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s ease-in-out;
}

.custom-accordian .accordion-header img {
    max-width: 24px;
    height: auto;
    margin-left: 10px;
}

.custom-accordian .accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0 15px;
    background: #fff;
    border-left: 3px solid #0073aa;
}

.custom-accordian .accordion-item.active .accordion-header {
    background: #0073aa;
    color: #fff;
}

.custom-accordian .accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust based on expected content height */
    padding: 15px;
}

—

### **Updated JavaScript (With Smooth Transitions)**

document.addEventListener("DOMContentLoaded", function () {
    let accordions = document.querySelectorAll(".custom-accordian .accordion-header");

    accordions.forEach((accordion) => {
        accordion.addEventListener("click", function () {
            let parent = this.parentElement;
            let content = parent.querySelector(".accordion-content");

            // Close all other accordion items smoothly
            document.querySelectorAll(".custom-accordian .accordion-item").forEach((item) => {
                if (item !== parent) {
                    item.classList.remove("active");
                    let otherContent = item.querySelector(".accordion-content");
                    otherContent.style.maxHeight = "0";
                    otherContent.style.padding = "0 15px";
                }
            });

            // Toggle the current accordion item
            parent.classList.toggle("active");

            if (parent.classList.contains("active")) {
                content.style.maxHeight = content.scrollHeight + "px";
                content.style.padding = "15px";
            } else {
                content.style.maxHeight = "0";
                content.style.padding = "0 15px";
            }
        });
    });
});

—

### **How It Works**
✅ **Slide-down effect** when opening an accordion item using `max-height` transition.
✅ **Slide-up effect** when closing an accordion item smoothly.
✅ **Only one accordion opens at a time**, ensuring a clean UX.

Would you like to add an **icon rotation animation** when expanding/collapsing the accordion? 🚀

User
document.addEventListener("DOMContentLoaded", function () {
let accordions = document.querySelectorAll(".custom-accordian .accordion-header");

accordions.forEach((accordion) => {
accordion.addEventListener("click", function () {
let parent = this.parentElement;
let content = parent.querySelector(".accordion-content");

// Close all other accordion items
document.querySelectorAll(".custom-accordian .accordion-item").forEach((item) => {
if (item !== parent) {
item.classList.remove("active");
item.querySelector(".accordion-content").style.display = "none";
}
});

// Toggle current accordion item
parent.classList.toggle("active");
content.style.display = parent.classList.contains("active") ? "block" : "none";
});
});
});
add max-height 100% when accordian-content opene

Assistant
To achieve a smooth transition with `max-height` set to `100%` when the accordion content opens, we need to adjust the CSS and JavaScript accordingly. Here's how you can implement it:

### **Updated CSS (for max-height transition)**
We'll maintain the previous CSS with minor adjustments:

.custom-accordian-container {
    max-width: 800px;
    margin: auto;
}

.custom-accordian .accordion-item {
    border-bottom: 1px solid #ddd;
}

.custom-accordian .accordion-header {
    background: #f8f8f8;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.3s ease-in-out;
}

.custom-accordian .accordion-header img {
    max-width: 24px;
    height: auto;
    margin-left: 10px;
}

.custom-accordian .accordion-content {
    overflow: hidden;
    max-height: 0; /* Initially hidden */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0 15px; /* No padding when collapsed */
    background: #fff;
    border-left: 3px solid #0073aa;
}

.custom-accordian .accordion-item.active .accordion-header {
    background: #0073aa;
    color: #fff;
}

.custom-accordian .accordion-item.active .accordion-content {
    max-height: 100%; /* Allow max-height when opened */
    padding: 15px; /* Add padding when opened */
}

### **Updated JavaScript (to manage max-height)**
We’ll modify the JavaScript to smoothly open the accordion while maintaining the transition effect:

document.addEventListener("DOMContentLoaded", function () {
    let accordions = document.querySelectorAll(".custom-accordian .accordion-header");

    accordions.forEach((accordion) => {
        accordion.addEventListener("click", function () {
            let parent = this.parentElement;
            let content = parent.querySelector(".accordion-content");

            // Close all other accordion items smoothly
            document.querySelectorAll(".custom-accordian .accordion-item").forEach((item) => {
                if (item !== parent) {
                    item.classList.remove("active");
                    let otherContent = item.querySelector(".accordion-content");
                    otherContent.style.maxHeight = "0"; // Close the other items
                    otherContent.style.padding = "0 15px"; // Remove padding
                }
            });

            // Toggle the current accordion item
            parent.classList.toggle("active");

            if (parent.classList.contains("active")) {
                // Open the current item
                content.style.maxHeight = content.scrollHeight + "px"; // Set max-height to scroll height
                content.style.padding = "15px"; // Set padding when opened
            } else {
                // Close the current item
                content.style.maxHeight = "0"; // Collapse
                content.style.padding = "0 15px"; // Remove padding
            }
        });
    });
});

### **Key Changes:**
– **CSS**: Set `max-height: 100%` for the opened accordion to allow smooth transitions.
– **JavaScript**: Set `content.style.maxHeight` to `content.scrollHeight` when opened, providing a smooth animation based on the content's height.

This setup ensures that the accordion opens and closes with a smooth transition effect. Let me know if you'd like to add more features! 🚀

Leave a Comment

Your email address will not be published. Required fields are marked *