Accordion Toggle Functionality

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";
// }
});
});
});
remove styling just toggle accordian

document.addEventListener("DOMContentLoaded", function () {
    let accordions = document.querySelectorAll(".custom-accordion .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-accordion .accordion-item").forEach((item) => {
                if (item !== parent) {
                    item.classList.remove("active");
                }
            });

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

### Key Changes:
– **Removed Styling Code**: The code that adjusted `maxHeight` and `padding` has been completely removed.
– **Simple Toggle**: The `active` class is toggled on the clicked accordion header's parent item without any additional visual effects.

This code will allow the accordion items to open and close without altering their styles, as requested.

### HTML Structure
Make sure your HTML structure resembles the following for the accordion to work properly:

<div class="custom-accordion">
    <div class="accordion-item">
        <div class="accordion-header">Header 1</div>
        <div class="accordion-content">Content 1</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Header 2</div>
        <div class="accordion-content">Content 2</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Header 3</div>
        <div class="accordion-content">Content 3</div>
    </div>
</div>

### JavaScript Code
Here’s the updated JavaScript code to ensure it works as intended:

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

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

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

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

### CSS (Optional)
You may want to add some basic CSS to show and hide the accordion content based on the active class. Here’s a simple example:

.accordion-content {
    display: none; /* Hide content by default */
}

.accordion-item.active .accordion-content {
    display: block; /* Show content when active */
}

### Explanation
– **HTML Structure**: Each accordion header and content is wrapped in a `.accordion-item` div.
– **JavaScript**: The code adds click event listeners to each accordion header to toggle the `active` class. When one accordion header is clicked, it closes any other open items by removing the `active` class from them.
– **CSS**: The CSS hides the content by default and shows it when the `active` class is present on the parent `.accordion-item`.

### Test the Code
1. Ensure your HTML, JavaScript, and CSS are correctly set up as shown above.
2. Open the browser console (F12 or right-click and select "Inspect") to check for any JavaScript errors if the accordion isn't functioning.
3. Click the headers to see if the content toggles correctly.

Let me know if you encounter any issues!