Software License Details

[Janne Evers]

TheHTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the element.

A disclosure widget is typically presented onscreen using a small triangle that rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the element are used as the label for the disclosure widget. The contents of the provide the accessible description for the .

When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.

Fully standards-compliant implementations automatically apply the CSS display: list-item to the element. You can use this to customize its appearance further. See Customizing the disclosure widget for further details.

In addition to the usual events supported by HTML elements, the element supports the toggle event, which is dispatched to the element whenever its state changes between open and closed. It is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.

The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.

The element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). For example, we can remove the disclosure widget icon by setting list-style: none.

The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an \"open\" state. A summary or label must be provided using the element.

When the user clicks on the widget or focuses it then presses the space bar, it \"twists\" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called \"twisty\".

The first summary element child of the element, if any, represents the summary or legend of the details. If there is no child summary element, the user agent should provide its own legend (e.g. "Details").

The name content attribute gives the name of the group of related details elements that the element is a member of. Opening one member of this group causes other members of the group to close. If the attribute is specified, its value must not be the empty string.

Before using this feature, authors should consider whether this grouping of related details elements into an exclusive accordion is helpful or harmful to users. While using an exclusive accordion can reduce the maximum amount of space that a set of content can occupy, it can also frustrate users who have to open many items to find what they want or users who want to look at the contents of multiple items at the same time.

A document must not contain more than one details element in the same details name group that has the open attribute present. Authors must not use script to add details elements to a document in a way that would cause a details name group to have more than one details element with the open attribute present.

Documents that use the name attribute to group multiple related details elements should keep those related elements together in a containing element (such as a section element or article element). When it makes sense for the group to be introduced with a heading, authors should put that heading in a heading element at the start of the containing element.

The open content attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the summary is to be shown.

When the element is created, if the attribute is absent, the additional information should be hidden; if the attribute is present, that information should be shown. Subsequently, if the attribute is removed, then the information should be hidden; if the attribute is added, the information should be shown.

The user agent should allow the user to request that the additional information be shown or hidden. To honor a request for the details to be shown, the user agent must set the open attribute on the element to the empty string. To honor a request for the information to be hidden, the user agent must remove the open attribute from the element.

If namespace is not null, then return.If localName is name, then ensure details exclusivity by closing the given element if needed given element.If localName is open, then: If one of oldValue or value is null and the other is not null, run the following steps, which are known as the details notification task steps, for this details element:

If oldValue is null, queue a details toggle event task given the details element, "closed", and "open".Otherwise, queue a details toggle event task given the details element, "open", and "closed". If oldValue is null and value is not null, then ensure details exclusivity by closing other elements if needed given element. The details HTML element insertion steps, given insertedNode, are:

Ensure details exclusivity by closing the given element if needed given insertedNode. To be clear, these attribute change and insertion steps also run when an attribute or element is inserted via the parser.

Set oldState to element's details toggle task tracker's old state.Remove element's details toggle task tracker's task from its task queue.Set element's details toggle task tracker to null. Queue an element task given the DOM manipulation task source and element to run the following steps:

Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState and the newState attribute initialized to newState.Set element's details toggle task tracker to null. Set element's details toggle task tracker to a struct with task set to the just-queued task and old state set to oldState. To ensure details exclusivity by closing other elements if needed given a details element element:

Assert: element has an open attribute.If element does not have a name attribute, or its name attribute is the empty string, then return.Let document be element's node document.Let oldFlag be the value of document's fire mutation events flag.Set document's fire mutation events flag to false.Let groupMembers be a list of elements, containing all elements in element's details name group except for element, in tree order. For each element otherElement of groupMembers:

Assert: otherElement is the only element in groupMembers that has the open attribute set.Remove the open attribute on otherElement.Break. Set document's fire mutation events flag to oldFlag. To ensure details exclusivity by closing the given element if needed given a details element element:

If element does not have an open attribute, then return.If element does not have a name attribute, or its name attribute is the empty string, then return.Let document be element's node document.Let oldFlag be the value of document's fire mutation events flag.Set document's fire mutation events flag to false.Let groupMembers be a list of elements, containing all elements in element's details name group except for element, in tree order. For each element otherElement of groupMembers:

Set currentNode to the details element which currentNode is slotted into.If the open attribute is not set on currentNode, then set the open attribute on currentNode to the empty string. Otherwise, set currentNode to the parent node of currentNode within the flat tree. The following example shows the details element being used to hide technical details in a progress report.

3a8082e126