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

Publicado em: 15 Fevereiro 2022
no canal de: 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

Nesta página do site você pode assistir ao vídeo on-line Expand Collapse Section using only HTML & CSS [No JavaScript]🔥 duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Frontend Guruji 15 Fevereiro 2022, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 7,611 vezes e gostou 95 espectadores. Boa visualização!

132