Expand Collapse Section using only HTML & CSS [No JavaScript]🔥 #csstricks #csstutorial #cssanimation

Learn how to Create a Collapsible Section using only HTML & CSS.
HTML CSS Tutorial for FrontEnd Developers.

#csstricks #javascripttricks #devtoolstricks #htmltricks #frontenddevelopment #html #css #javascript #frontendguruji

Steps to Create Collapsible Section using HTML & CSS
- Create a parent container using div HTML element
- Use label HTML tag for heading
- Add input type="checkbox" to detect the click on heading
- Use div for collapsible text
- Style Heading with background-color & padding
- Style Collapsible text

Steps to create a caret using HTML CSS
- Add pseudo class element :before to label
- Change font-size and height to 0
- Add border-width and border-style
- Use border-color to make it a triangle
- Add border-color transparent on top, right and bottom. Leave it black for the left

Steps to Implement Rotation Animation to Caret
- Add CSS Animation Transition to label:before
- Detect if checkbox is selected
- Rotate caret by 90deg using CSS Transform Rotate
- Change the center of rotation using transform-origin property

Steps to Implement Collapsible Animation to the content
- Add CSS Animation Transition to content div
- By default add height:0, overflow:hidden & opacity:0 to content
- Detect if checkbox is selected
- Change height to auto & opacity to 1

Code:

00:00 Intro
00:27 Create HTML & CSS for Expand Collapse Feature
03:37 Create a Caret using HTML & CSS
07:09 Add the Click Detection using HTML & CSS
08:35 Add Rotation Animation to Caret using CSS Animation
11:13 Add Collapsible Animation to the content using CSS Animation
13:38 Sample code and Related Tutorials

Subscribe the Channel & Enhance your FrontEnd Skills by watching Tricks, Tips & Tutorials on HTML, CSS & JavaScript.

Connect:

[TheBallGame]

Thank you very much, it works perfect, great video!

[fnyn]

Just what I was looking for, thanks for the video!

[mendiratta]

works on pc browser but not working on phone browser for some reason. It shows a checkbox and on checking it nothing happens. any fixes?

[naima]

How do I do the second collapse and expand? Do I use the exact same code?

[christianschmid]

Good video. Not exactly what I looked for. I seek a way to animate the collapse of the content-div.

I liked your caret animation tho :)