author | handle | source | date |
---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
November 17, 2021 2:26 PM |
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
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
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
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