WebDev Tips . Creating expandable boxes with HTML only

Creating expandable boxes with HTML only

#25

HTML - CSS

July 30, 2019

alt text

In this tip we'll cover another new element that HTML5 brought to us: expandable boxes (with the details and summary tags)! This allow us to have a tab with a title for example, and an arrow that when you click it will expand a section to show the user more content. And with this method.you won't need CSS or JS to create this functionality.

<details>

   <summary>This is an expandable box, click it!</summary>

   <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit...
   </p>

</details>

You just have to create a 'details' element. Inside it use a 'summary' element where you'll place your title. Then you can have another tag like a 'div' or a 'p' where you'll place all your remaining content! See the snippet to have a better grasp of how this works.

details {
   width: 400px;
   border-radius: 8px;
}

summary {
   padding: 20px;
   background-color: #8125E2;
   color:#fff;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
}

details p {
   padding: 10px 20px;
   font-size: 14px;
   line-height: 24px;
   color: #424242;
}

details[open] {
   background: #FAFAFA;
}

It's a really cool and simple effect you can use on your projects!
Have a nice one guys! 😄👊