Follow Us On Telegram Telegram link
This is The Small Project For Your Site And You Can Use It Freely In Your's As Well , As It Is Copyright Free You Can...
In This Project Technologies Are Used Is As Follows :-)
- HTML
- CSS
- JAVASCRIPT
HTML
<!DOCTYPE html> <!--=== Coding by CODEATNOW | www.CODEATNOW.com === --> <html lang="en"> <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"> <!----======== CSS ======== --> <link rel="stylesheet" href="style.css"> <!-- =====Fontawesome CDN Link===== --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <title>CodeAtNow | Accordion in HTML CSS & JavaScript</title> </head> <body> <div class="accordion"> <div class="accordion-content"> <header> <span class="title">What do you mean by Accordion?</span> <i class="fa-solid fa-plus"></i> </header> <p class="description"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem? </p> </div> <div class="accordion-content"> <header> <span class="title">What do you mean by Accordion?</span> <i class="fa-solid fa-plus"></i> </header> <p class="description"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem? </p> </div> <div class="accordion-content"> <header> <span class="title">What do you mean by Accordion?</span> <i class="fa-solid fa-plus"></i> </header> <p class="description"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem? </p> </div> <div class="accordion-content"> <header> <span class="title">What do you mean by Accordion?</span> <i class="fa-solid fa-plus"></i> </header> <p class="description"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem? </p> </div> </div> <script src="script.js"></script> </body> </html>
CSS
/* ===== Google Font Import - Poppins ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); *{ 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: #11131e; } .accordion{ max-width: 530px; width: 100%; background: #FFF; margin: 0 15px; padding: 15px; border-radius: 8px; box-shadow: 0 0 4px rgba(0,0,0,0.2); } .accordion .accordion-content{ margin: 10px 0; border-radius: 4px; background: #FFF7F0; border: 1px solid #FFD6B3; overflow: hidden; } .accordion-content:nth-child(2){ background-color: #F0FAFF; border-color: #CCEEFF; } .accordion-content:nth-child(3){ background-color: #FFF0F3; border-color: #FFCCD6; } .accordion-content:nth-child(4){ background-color: #F0F0FF; border-color: #CCCCFF; } .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; } .accordion-content.open header{ min-height: 35px; } .accordion-content header .title{ font-size: 14px; font-weight: 500; color: #333; } .accordion-content header i{ font-size: 15px; color: #333; } .accordion-content .description{ height: 0; font-size: 12px; color: #333; font-weight: 400; padding: 0 15px; transition: all 0.2s linear; }
JS
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`; //scrollHeight property returns the height of an element including padding , but excluding borders, scrollbar or margin 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); //calling the funtion and also passing the index number of the clicked header }) }) 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"); } }) }