details tag is one of the most useful features of html5
you can create an interactive toggle widget without using javascript at all but do you
know with the right css hack it can create lots of cool examples like this so in this episode
we'll show you how to make it from scratch in just a few minutes ready let's check it out
here's what details tag looks like without any css there is a summary tab which is the
headline and then you can click at it to expand the details i know it looks ugly
but trust me you're gonna love it at the end of this video so let's start with our basic example
first first i'm going to add a headline and a wrapper div to wrap all the details tags
then inside the details i will create a summary tag
then next to it i will create a paragraph for the content
let's duplicate it to create four items
now let's add some css styles first i will set the wrapper width and margin zero auto to center it
then for the summary tag i will set the font size weight and color
then set margin padding and small body radius
also set the text align to left looks good now let's add the animation when the details tag
is clicked the open attribute will be added so we'll use css selector to check the open state
we'll increase the margin button when the tag is opened
then add a half second transition to create the animation
also add cursor pointer to change the cursor to hand icon
looks good but our hack is not going to stop here
here's our next example we are going to work on i got an inspiration from this codepen
challenge but i rewrite some css to use flex layout instead of float since it's easier to
understand so first i'm going to add a wrapper to wrap each of the details tag
then for the css i will set the main wrapper width to half of the viewport then for the
detail wrapper set width to 100 percent add some margin bottom and set display to flex
for the details tag itself we'll set the width to 50 percent and here's what it looks like so far
then we'll use nth child selector to set justify content to write for even details tags
then do the opposite for the odd one
next we work on the center line we'll use before pseudo element
then set the width to 3 pixels and gray background to create a line
next we will set the position to absolute and set both top and bottom to zero to expand the line
then set left to 50 percent to place it at the center also we'll need to add position relative
to the wrapper to set the reference point for the position absolute of the child element
next we'll work on the icon i will use font awesome free font we'll include it to our
project using css file from cdn you can find more information about font awesome on their website
then i'll use after pseudo element to add the icon
first set the font family and content to the check mark character unicode
then set the font size color width and
height
then we'll set position to absolute and 50 left to center it also set the background to white and
increase z index to bring the icon on top of the line and finally set the margin and bottom radius
and that's all for this html5 css hack episode if you like this tutorial don't forget to subscribe
our channel to stay tuned for the update thanks for watching see you next time bye