What’s New In HTML 5: Expanding and Collapsing Content Effect

In this post we’ll learn about an HTML 5 effect similar to dropdown menus. Check out the following code:

Full Code
<!DOCTYPE html>
<html lang="en">
	<head>
	</head>
	<body>
		<details>
			<summary>See More</summary>

This text will be hidden if your browser supports it.

		</details>
	</body>
</html>

(Effect Code Begins)

See More

This text will be hidden if your browser supports it.

(Effect Code Ends)

In this code the "summary" tag is the link used to collapse and/or show the rest of the contents of the detail tag. If you browser supports it, am using Chrome 16.0.912.63, the should see the effect above.

This for sure will replace a lot of Javascript code don’t you agree?

blog comments powered by Disqus