Simple HTML5 accordion

An article by admin    No Comments

Today I was going through a slide titled Latest in HTML 5. There I found one of the interesting tag of HTML 5 <details>. Currently this tag is only supported...

Today I was going through a slide titled Latest in HTML 5. There I found one of the interesting tag of HTML 5 <details>. Currently this tag is only supported in Chrome. This tag basically shows and hide a content. So this can be used to make a accordion.

Although this is a very simple accordion. But I hope it is a very interesting one. You can view the working demo below but this works only on Chrome.

Here accordion effect is fully gained only using the HTML5 details tag. CSS is only used to make is look better.

HTML code is as below:

<details open="open">
  <summary>Heading 1</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</details>
<details>
  <summary>Heading 2</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</details>

I hope this tag will be supported in all browsers soon.