Introduction to HTML 5.1 Details element

    As February 2018, HTML 5 is revised two times already. It feels like everybody was excited about HTML 5 for some time but quickly people moved on. I am going to write about a great element from HTML 5.1 named Details. Accordions are great for front-end developers because they save a lot of space on websites and they are user-friendly. You can download a free open source one  and start to use it pretty fast. HTML 5.1 gives you another option if you an accordion like control, you don't need any javascript to open or close an accordion like control anymore.
 
   To create an accordion like control in HTML 5.1, you need two elements. Details and Summary. 

<details id="Detail1">
  <summary>Product 1</summary>
  This product is awesome, you need to buy it to believe it. <br />
  
</details>
<details id="Detail2">
  <summary>Product 2</summary>
 This product is great, It's smaller and lighter than the older version.
  <br />

</details>

      Here is the code in action. You need Google Chrome or Firefox to be able to see the following demo. Just click on any Product and it should open or close with no javascript code.

Product 1

This product is awesome, you need to buy it to believe it.

Product 2

This product is great, It's smaller and lighter than the older version.

      You can use the toggle event to control the state of details element. I have created a demo in CodePen to demo the events and CSS of the details element. Check it out.