Expand Collapse Section using only HTML & CSS [No JavaScript]🔥

Published: 15 February 2022
on channel: Frontend Guruji

7,611

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...

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.
   / @frontendguruji

Connect:
Blog: https://frontendguruji.com/blog/
Instagram:   / frontendguruji
Facebook:   / frontendguruji

On this page of the site you can watch the video online Expand Collapse Section using only HTML & CSS [No JavaScript]🔥 with a duration of hours minute second in good quality, which was uploaded by the user Frontend Guruji 15 February 2022, share the link with friends and acquaintances, this video has already been watched 7,611 times on youtube and it was liked by 95 viewers. Enjoy your viewing!

15,510