The details tag in HTML5 and the jQuery Implementation


According to W3school, HTML5 has added a new tag, details. Its example usage is:

1
2
3
4
<details>
  <summary>Computing & Technology.</summary>
  https://helloacm.com
</details>
<details>
  <summary>Computing & Technology.</summary>
  https://helloacm.com
</details>

If your browser supports HTML5 and supports this tag, you will see the following working (expandable tag, click to toggle show-and-hide, removed due to AMP not allowing these HTML5 tags):

▶ Computing & Technology.
https://helloacm.com

Unfortunately, not all browsers support this such as Microsoft IE or Edge browsers. But you can always use jQuery (or pure javascript) to achieve the same effects (at least 99% similar).

▶ Computing & Technology.

The source code is:

1
2
3
4
5
jQuery(document).ready(function() {
  jQuery('#example_label1').click(function() {
     jQuery('#example_d1').toggle();
  });
});
jQuery(document).ready(function() {
  jQuery('#example_label1').click(function() {
     jQuery('#example_d1').toggle();
  });
});

Two HTML divs are defined: example_label1 and example_d1. The unicode triangle squares right is turned into down but this is not taken into account in this simple jQuery substitute.

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...
313 words
Last Post: How to Find First Unique Character in a String?
Next Post: How to Hide a File in JPEG under Linux Shell?

The Permanent URL is: The details tag in HTML5 and the jQuery Implementation

Leave a Reply