Expand Collapse Section using only HTML & CSS [No JavaScript]? #csstricks #csstutorial #cssanimatio

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:
https://codepen.io/mandeeppasbola/pen/VwrzZGK

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.
https://www.youtube.com/channel/UCw98YBFb18Ccw5rI3pTrgqg?sub_confirmation=1

Connect:
Blog: https://frontendguruji.com/blog/
Instagram: https://www.instagram.com/frontendguruji/
Facebook: https://www.facebook.com/FrontendGuruji