The <details> element in HTML is a part of the HTML5 specification that provides a way to create a disclosure widget from which the user can obtain additional information or controls. It is used to provide extra details or options that are initially hidden but can be revealed when needed.
The <details> element is designed to create a collapsible section of content that can be expanded or collapsed by the user. It is commonly used to show and hide additional details or information without cluttering the main content of a page.
<summary> element
The <summary> element is typically used as a child of <details>. It acts as the visible header or trigger for the collapsible content. Clicking on the <summary> toggles the visibility of the content inside the <details>.
details-and-summary.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Details and Summary Example</title> </head> <body> <h2>Frequently Asked Questions</h2> <details> <summary>How can I track my order?</summary> <p>Once your order is shipped, we will send you an email with a tracking number and a link to track your package.</p> </details> <details> <summary>How can I cancel my order?</summary> <p>Go to your profile -> orders, select the order to cancel and click on cancel button to cancel the order</p> </details> </body> </html>
Above snippet generate below screen.
Click on any question, you can see the content expanded.
No comments:
Post a Comment