HTML5 Details Tag

In past articles I have wrote about some of the new features which have come with HTML5. We have gone over some of new features with HTML5 forms and HTML5 placeholders. In todays tutorial we are going to investigate another HTML5 tag called Details. The details tag is used to easily implement a click to show more feature. It allows you to add a title and content inside the tag, the content will be hidden until the user clicks on the title which will then display the content. Clicking the title works on a toggle so it will hide the content again. In this tutorial you will learn how easy it is to use this feature in HTML5 and how you will recreate it using jQuery. ## HTML5 Details Tag

The details tag has a title which when clicked will display the rest of the content. The title of the details tag is called summary so the markup will look like this.

<details>

<summary>Title of the details tag</summary>

</details>

Now anything outside of the summary tag will be the content which is displayed on the click of the title.

<details>

<summary>Title of the details tag</summary>
<p>This text is displayed when you click the above text.</p>

</details>

That's it so simple to create and can be a very useful feature. To see which browsers currently support this tag go to can I use website. Please note at the time of writing this details tag is currently only supported in webkit browsers.

#jQuery Version Of Details Tag

The problem with HTML5 at the moment is that it's still not fully supported mainly because people are still using out of date browsers such as IE6-8. The details tag is something that is not supported on many browsers so you might want to use the jQuery alternative. This feature is something that can easy be done because of the slideToggle() method which you can just apply to the content on the click event of the title. For this example we need to change the HTML.

<div class="jQueryDetailsExample">
	<h2>Click Here For jQuery Version</h2>
	<p>This is how it's done using jQuery</p>
</div>

We need to add the jQuery so it will do the same as the details tag, therefore we need to start off by hiding the paragraph which is our content so we can toggle the display. Then on the click event of the h2 tag we can toggle the paragraph. Copy the following to copy the details functionality in jQuery.

$(document).ready(function(){
	$(".jQueryDetailsExample p").hide();
	
	$(".jQueryDetailsExample h2").click(function(){
		$(this).siblings("p").slideToggle();
	});
})