From 82ba818ff456bcd6d56a06226e3f27e98fbb55c3 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Thu, 14 Aug 2025 22:58:58 -0500 Subject: removing all downloaded devdocs files --- devdocs/html/element%2Fsummary.html | 145 ------------------------------------ 1 file changed, 145 deletions(-) delete mode 100644 devdocs/html/element%2Fsummary.html (limited to 'devdocs/html/element%2Fsummary.html') diff --git a/devdocs/html/element%2Fsummary.html b/devdocs/html/element%2Fsummary.html deleted file mode 100644 index 0c9ddf94..00000000 --- a/devdocs/html/element%2Fsummary.html +++ /dev/null @@ -1,145 +0,0 @@ -

<summary>: The Disclosure Summary element

The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

-

Try it

-
-

Attributes

-

This element only includes the global attributes.

-

Usage notes

-
-

The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

-
-

Default label text

-

If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box.

-

Default style

-
-

Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to display: block to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }.

-
-

Examples

-

Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element.

-

Basic example

-
-

A simple example showing the use of <summary> in a <details> element:

-

html

-
<details open>
-  <summary>Overview</summary>
-  <ol>
-    <li>Cash on hand: $500.00</li>
-    <li>Current invoice: $75.30</li>
-    <li>Due date: 5/6/19</li>
-  </ol>
-</details>
-
-

Result

-
- - -
-
-

Summaries as headings

-
-

You can use heading elements in <summary>, like this:

-

html

-
<details open>
-  <summary><h4>Overview</h4></summary>
-  <ol>
-    <li>Cash on hand: $500.00</li>
-    <li>Current invoice: $75.30</li>
-    <li>Due date: 5/6/19</li>
-  </ol>
-</details>
-
-

Result

-
- - -

This currently has some spacing issues that could be addressed using CSS.

Warning: Because the <summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The <h4> will have its role removed and thus will not be treated as a heading for these users.

-
-

HTML in summaries

-
-

This example adds some semantics to the <summary> element to indicate the label as important:

-

html

-
<details open>
-  <summary><strong>Overview</strong></summary>
-  <ol>
-    <li>Cash on hand: $500.00</li>
-    <li>Current invoice: $75.30</li>
-    <li>Due date: 5/6/19</li>
-  </ol>
-</details>
-
-

Result

-
- - -
-
-

Technical summary

-
Permitted content Phrasing content or one element of Heading content
Tag omission None; both the start tag and the end tag are mandatory.
Permitted parents The <details> element.
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLElement
-

Specifications

-
- - -
Specification
HTML Standard
# the-summary-element
-

Browser compatibility

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
summary127949No156418491461.0
display_list_item898949No75No89894963No15.0
-

See also

-
-

- © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary -

-
-- cgit v1.2.3