JavaScript Accordion Design

byCodingFlicks -April 19, 2023

0

Accordion is the simple and easy-to-use web that hides and shows text content within a single web page. An accordion has several tabs, each representing a section, and when clicked, that section expands to reveal the hidden content within it. A lot of information can be displayed in a small space with this design element. There is a video demo underneath to give you an idea of what the snippet will look like. On our website, there are over 150 code snippets about CSS animation examples, Website Design, Javascript, Full Website Design, and many more.

Video Demo:

An accordion can be created with just HTML and CSS but we've added some JavaScript here to make it look a bit more dynamic.

You May Also Like:

JavaScript Accordion Design [ Source Code ]:

We have created an HTML and CSS file. Then I added the javascript code below the HTML file. Copy the code from the code box below and paste your file. Save the code and test it in your browser. If the code doesn't work then download the code from the below button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated wrapper using HTML CSS & Javascript</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="accordion">
        <div class="accordion-content">
            <header>
                <span class="title">What is HTML in Web Design?</span>
                <i class="fa-solid fa-plus"></i>
            </header>

            <p class="description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum ullam, quae a saepe earum qui facere iusto quis temporibus delectus reprehenderit eos ad ex dolorum esse amet dolorem. Nam reprehenderit, dignissimos odit commodi quos consequuntur natus amet placeat recusandae repellendus!
            </p>
        </div>

        <div class="accordion-content">
            <header>
                <span class="title">What is CSS in Web Design?</span>
                <i class="fa-solid fa-plus"></i>
            </header>

            <p class="description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati eum, ratione sit provident ab amet cum fugit, dolorem quis exercitationem corrupti voluptate est maiores, aperiam nihil saepe laudantium distinctio eligendi soluta eaque recusandae? Quisquam culpa incidunt natus tempora voluptatem quibusdam ut sint temporibus nulla qui, iusto tempore, illo neque facilis. Exercitationem odio labore voluptatem necessitatibus unde facere aspernatur in sunt!
            </p>
        </div>
        <div class="accordion-content">
            <header>
                <span class="title">What is Javascript in Web Design?</span>
                <i class="fa-solid fa-plus"></i>
            </header>

            <p class="description">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt laudantium dignissimos voluptates asperiores suscipit quam animi unde exercitationem dicta eos labore quidem libero maiores ducimus veritatis voluptatem, debitis necessitatibus sunt sed dolorum perspiciatis doloremque. Placeat repudiandae natus illo iste accusantium, corrupti consequatur exercitationem dolores totam quod veritatis ducimus repellendus, sed nisi perspiciatis suscipit impedit at recusandae! Quam, est accusamus error quis vitae fuga maxime ipsam doloribus, accusantium quas assumenda reprehenderit?
            </p>
        </div>
        <div class="accordion-content">
            <header>
                <span class="title">What is Responsive Web Design?</span>
                <i class="fa-solid fa-plus"></i>
            </header>

            <p class="description">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Et provident voluptas placeat magni sed, incidunt, pariatur quibusdam omnis perferendis, id perspiciatis dignissimos alias quo cupiditate est minus quod commodi sapiente.
            </p>
        </div>
    </div>


    <script>
        const accordionContent = document.querySelectorAll(".accordion-content");

accordionContent.forEach((item, index) => {
    let header = item.querySelector("header");
    header.addEventListener("click", () =>{
        item.classList.toggle("open");

        let description = item.querySelector(".description");
        if(item.classList.contains("open")){
            description.style.height = `${description.scrollHeight}px`; 
            item.querySelector("i").classList.replace("fa-plus", "fa-minus");
        }else{
            description.style.height = "0px";
            item.querySelector("i").classList.replace("fa-minus", "fa-plus");
        }
        removeOpen(index);
    })
})

function removeOpen(index1){
    accordionContent.forEach((item2, index2) => {
        if(index1 != index2){
            item2.classList.remove("open");

            let des = item2.querySelector(".description");
            des.style.height = "0px";
            item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
        }
    })
}
    </script>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9e9e9;
}
.accordion {
	max-width: 600px;
	width: 100%;
	background: #FFF;
	margin: 0 15px;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.accordion .accordion-content {
	margin: 10px 0;
	border-radius: 4px;
	overflow: hidden;
}
.accordion-content.open{
    padding-bottom: 10px;
}
.accordion-content header{
    display: flex;
    min-height: 50px;
    padding: 0 15px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s linear;
    background: #94007f;
}
.accordion-content.open header{
    min-height: 35px;
}
.accordion-content header .title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}
.accordion-content header i{
    font-size: 15px;
    color: #fff;
}
.accordion-content .description {
	height: 0;
	font-size: 14px;
	color: #262626;
	font-weight: 400;
	padding: 0px 15px;
	transition: all 0.2s linear;
	background: #fff;
	margin-top: 10px;
}

Hope the code is working properly. If you like the content of our website then share it with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.