details element

<details>

Explanation

Details element almost acts like an "expander". User needs to click the expander in order to view the information.
<details> <summary>Title</summary> <p>Content</p> </details>
Element Specific attribute supported by this element are:
AttributeValueDescription
OpenOpen Information will be visible to the user. The nature of this attribute is boolean.

Example Code 1:

Result 1:


SEO
Search Engine Optimization

SEO is a process by which a website is taken to the top level in the search results. Method adopted for this is optimization of a website with possible keywords that can be used by visitors while searching.
  • Click the "left arrow" icon to view the hidden information.
  • The browser displays the details i.e. hidden text, in case this tag is not applicable in it (browser).
  • Previously user needs to use "Javascript" to create the expander option. This tag reduces the work load as a user can use this tag and form a expander.

Example Code 2:

Result 2:


SEO
Search Engine Optimization

SEO is a process by which a website is taken to the top level in the search results. Method adopted for this is optimization of a website with possible keywords that can be used by visitors while searching.
  • The hidden information will be shown by the browser, if the open attribute is used in this element.
It supports both Global Attributes and Event Attributes in HTML5.
It is newly introduced in HTML5 and it is not available in the earlier versions of HTML.

Limitations:

It will function only in Chrome browser.

Ask Questions

Ask Question