Skip to content

Latest commit

 

History

History

01-Accordion

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
author handle source date
Ajay Yadav 🎯
@ATechAjay
November 17, 2021 2:26 PM

ATechAjay Ajay Yadav 🎯 (@ATechAjay) - November 17, 2021 2:26 PM

💚 Day 1️⃣ / 1️⃣0️⃣0️⃣ days of Master in CSS Design series!

💥 Today we are going to design ACCORDION using HTML CSS.

❓What is the logic behind designing the accordion?

#100DaysOfCode #CodeNewbie #webdev

A Thread🧵👇 pic.twitter.com/FkcvkKhiV2

3_1460912645389754371

Tweet link


ATechAjay Ajay Yadav 🎯 (@ATechAjay) - November 17, 2021 2:26 PM

👉 First of all, you have to design your simple accordion layout as you wish.

like this one👇 pic.twitter.com/FIduGCTTc0

3_1460913369871912960

Tweet link


ATechAjay Ajay Yadav 🎯 (@ATechAjay) - November 17, 2021 2:26 PM

👉 Now, initially, you want to collapse all accordion items.

👉 So you can set the display to none in a hidden box container. pic.twitter.com/0TutAmxoS8

3_1460913876040441859

3_1460913912719675392

Tweet link


ATechAjay Ajay Yadav 🎯 (@ATechAjay) - November 17, 2021 2:26 PM

👉 Now when you click on accordion-item then content will be expanded.

👉 For this, you have to add one class in the parent of your accordion item and set the display to block.

😍That's all 💹

codepen : bit.ly/3oFidnZ pic.twitter.com/jLjuorPXr8

3_1460914520625270786

3_1460914596609343492

Tweet link