HTML5 details/summary

In this example below you will see how to do a HTML5 details/summary with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 13twelve, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 13twelve ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5 details/summary</title>
  
  
  
  
  
</head>

<body>

  <details>
  <summary>Title 1</summary>
  <p>In massa sapien, porttitor eget congue sed, facilisis et massa. Morbi non enim et metus gravida ultricies. Proin sit amet risus risus. In ultricies nibh tincidunt venenatis scelerisque. Duis sagittis facilisis magna, at mattis massa tempor eu. Fusce sit amet nisi pulvinar, tincidunt neque eu, facilisis tortor. Duis sed rhoncus mi. Vestibulum sagittis enim lacus, in venenatis urna interdum sit amet. Nunc eu tortor mollis, interdum eros sodales, ultricies quam. Vestibulum ut sem a mi ultricies pretium. Nam rhoncus elit non libero tincidunt, sit amet mattis nulla placerat.</p>
  <p>Vestibulum tincidunt felis libero, eu tempus urna tincidunt porttitor. Duis a dignissim nisl, vel fringilla erat. Aenean vitae aliquam lectus. Aenean posuere varius dolor sit amet facilisis. Morbi mauris nulla, rhoncus eget malesuada eu, placerat nec velit. Maecenas sed auctor ligula. Nam enim nisi, dapibus a metus ut, hendrerit facilisis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sit amet venenatis nunc. Maecenas vehicula metus ut mauris elementum, nec suscipit lacus sollicitudin.</p>
  <details open>
  <summary>Sub Title 1</summary>
  <p>Vestibulum tincidunt felis libero, eu tempus urna tincidunt porttitor.</p>
</details>
<details>
  <summary>Sub Title 2</summary>
  <p>Vestibulum tincidunt felis libero, eu tempus urna tincidunt porttitor.</p>
</details>
<details>
  <summary>Sub Title 3</summary>
  <p>Vestibulum tincidunt felis libero, eu tempus urna tincidunt porttitor.</p>
</details>
</details>
<details open>
  <summary>Title 2</summary>
  <p>In massa sapien, porttitor eget congue sed, facilisis et massa. Morbi non enim et metus gravida ultricies. Proin sit amet risus risus. In ultricies nibh tincidunt venenatis scelerisque. Duis sagittis facilisis magna, at mattis massa tempor eu. Fusce sit amet nisi pulvinar, tincidunt neque eu, facilisis tortor. Duis sed rhoncus mi. Vestibulum sagittis enim lacus, in venenatis urna interdum sit amet. Nunc eu tortor mollis, interdum eros sodales, ultricies quam. Vestibulum ut sem a mi ultricies pretium. Nam rhoncus elit non libero tincidunt, sit amet mattis nulla placerat.</p>
  <p>Vestibulum tincidunt felis libero, eu tempus urna tincidunt porttitor. Duis a dignissim nisl, vel fringilla erat. Aenean vitae aliquam lectus. Aenean posuere varius dolor sit amet facilisis. Morbi mauris nulla, rhoncus eget malesuada eu, placerat nec velit. Maecenas sed auctor ligula. Nam enim nisi, dapibus a metus ut, hendrerit facilisis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sit amet venenatis nunc. Maecenas vehicula metus ut mauris elementum, nec suscipit lacus sollicitudin.</p>
</details>
<details>
  <summary>Title 3</summary>
  <p>In massa sapien, porttitor eget congue sed, facilisis et massa. Morbi non enim et metus gravida ultricies. Proin sit amet risus risus. In ultricies nibh tincidunt venenatis scelerisque. Duis sagittis facilisis magna, at mattis massa tempor eu. Fusce sit amet nisi pulvinar, tincidunt neque eu, facilisis tortor. Duis sed rhoncus mi. Vestibulum sagittis enim lacus, in venenatis urna interdum sit amet. Nunc eu tortor mollis, interdum eros sodales, ultricies quam. Vestibulum ut sem a mi ultricies pretium. Nam rhoncus elit non libero tincidunt, sit amet mattis nulla placerat.</p>
  <p>Vestibulum tincidunt felis libero, eu tempus urna tincidunt porttitor. Duis a dignissim nisl, vel fringilla erat. Aenean vitae aliquam lectus. Aenean posuere varius dolor sit amet facilisis. Morbi mauris nulla, rhoncus eget malesuada eu, placerat nec velit. Maecenas sed auctor ligula. Nam enim nisi, dapibus a metus ut, hendrerit facilisis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sit amet venenatis nunc. Maecenas vehicula metus ut mauris elementum, nec suscipit lacus sollicitudin.</p>
</details>

<p><br><br><br><br><a href="http://caniuse.com/#search=details" target="_blank">caniuse.com/#search=details</a></p>
  
  

</body>

</html>

Comments