1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
|
<header><h1><details>: The Details disclosure element</h1></header><div class="section-content">
<p>The <code><details></code> <a href="../index">HTML</a> 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 <a href="summary"><code><summary></code></a> element.</p> <p>A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <code><summary></code> element are used as the label for the disclosure widget.</p>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/details.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>A <code><details></code> widget can be in one of two states. The default <em>closed</em> state displays only the triangle and the label inside <code><summary></code> (or a <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>-defined default string if no <code><summary></code>).</p> <p>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".</p> <p>You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its <a href="#open"><code>open</code></a> attribute. Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.</p> <p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p> <p>Fully standards-compliant implementations automatically apply the CSS <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a>: list-item</code> to the <a href="summary"><code><summary></code></a> element. You can use this to customize its appearance further. See <a href="#customizing_the_disclosure_widget">Customizing the disclosure widget</a> for further details.</p>
</div>
<h2 id="attributes">Attributes</h2>
<div class="section-content">
<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="open"><a href="#open"><code>open</code></a></dt> <dd> <p>This Boolean attribute indicates whether the details — that is, the contents of the <code><details></code> element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> You have to remove this attribute entirely to make the details hidden. <code>open="false"</code> makes the details visible because this attribute is Boolean.</p> </div> </dd> </dl>
</div>
<h2 id="events">Events</h2>
<div class="section-content">
<p>In addition to the usual events supported by HTML elements, the <code><details></code> element supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event"><code>toggle</code></a> event, which is dispatched to the <code><details></code> element whenever its state changes between open and closed. It is sent <em>after</em> 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.</p> <p>You can use an event listener for the <code>toggle</code> event to detect when the widget changes state:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="uFlpOGna6XagO5ci3kXHaUmvBMME9wNxK9NlxavUmHw=" data-language="js">details<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"toggle"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>details<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">/* the element was toggled open */</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token comment">/* the element was toggled closed */</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
</div>
</div>
<h2 id="examples">Examples</h2>
<h3 id="a_simple_disclosure_example">A simple disclosure example</h3>
<div class="section-content">
<p>This example shows a simple <code><details></code> element with a <code><summary></code>.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="qpItHAkBiYNruaTloJeKVBAtzMB7IFs2eEW8C9MNCk4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="A simple disclosure example sample" id="frame_a_simple_disclosure_example" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=a_simple_disclosure_example" loading="lazy"></iframe>
</div>
</div>
<h3 id="creating_an_open_disclosure_box">Creating an open disclosure box</h3>
<div class="section-content">
<p>To start the <code><details></code> box in its open state, add the Boolean <code>open</code> attribute:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="gnBXB28XondnpjuhBrPGz3KCQihbijwV0sBRQCyw1BQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect3">
<iframe class="sample-code-frame" title="Creating an open disclosure box sample" id="frame_creating_an_open_disclosure_box" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=creating_an_open_disclosure_box" loading="lazy"></iframe>
</div>
</div>
<h3 id="customizing_the_appearance">Customizing the appearance</h3>
<div class="section-content">
<p>Now let's apply some CSS to customize the appearance of the disclosure box.</p> <h4 id="css">CSS</h4> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="UxgN4w/bDU+pIezvMttGx9i4W+PeVMBpygxdZ+MYWx8=" data-language="css"><span class="token selector">details</span> <span class="token punctuation">{</span>
<span class="token property">font</span><span class="token punctuation">:</span>
16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span>
Calibri<span class="token punctuation">,</span>
sans-serif<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 620px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">details > summary</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span>
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">details > p</span> <span class="token punctuation">{</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 0 0 10px 10px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">details[open] > summary</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ccf<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.</p> <p>The selector <code>details[open]</code> can be used to style the element which is open.</p> <h4 id="html">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="qpItHAkBiYNruaTloJeKVBAtzMB7IFs2eEW8C9MNCk4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_3">Result</h4>
<div class="code-example" id="sect4">
<iframe class="sample-code-frame" title="Customizing the appearance sample" id="frame_customizing_the_appearance" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=customizing_the_appearance" loading="lazy"></iframe>
</div>
</div>
<h3 id="customizing_the_disclosure_widget">Customizing the disclosure widget</h3>
<div class="section-content">
<p>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.</p> <p>The <a href="summary"><code><summary></code></a> element supports the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> shorthand property and its longhand properties, such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>, to change the disclosure triangle to whatever you choose (usually with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image"><code>list-style-image</code></a>). For example, we can remove the disclosure widget icon by setting <code>list-style: none</code>.</p> <h4 id="css_2">CSS</h4> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="bMx6onZxL5Wkl+TyHYD3ALYHv8/BO0VQ96UMzGgBwpg=" data-language="css"><span class="token selector">details</span> <span class="token punctuation">{</span>
<span class="token property">font</span><span class="token punctuation">:</span>
16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span>
Calibri<span class="token punctuation">,</span>
sans-serif<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 620px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">details > summary</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span>
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">details > p</span> <span class="token punctuation">{</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 0 0 10px 10px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>This CSS creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.</p> <h4 id="html_2">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="qpItHAkBiYNruaTloJeKVBAtzMB7IFs2eEW8C9MNCk4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
</pre>
</div> <h4 id="result_4">Result</h4>
<div class="code-example" id="sect5">
<iframe class="sample-code-frame" title="Customizing the disclosure widget sample" id="frame_customizing_the_disclosure_widget" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=customizing_the_disclosure_widget" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>
<a href="../content_categories#flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> One <a href="summary"><code><summary></code></a> element followed by <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element">HTML Standard <br><small># the-details-element</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>details</code></th>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes"><details><summary>49</summary>Before Firefox 57, there was a bug meaning that <code><details></code> elements can't be made open by default using the <code>open</code> attribute if they have a CSS <code>animation</code> active on them.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes"><details><summary>49</summary>There is a bug meaning that <code><details></code> elements can't be made open by default using the <code>open</code> attribute if they have a CSS <code>animation</code> active on them.</details></td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>name</code></th>
<td class="bc-supports-yes">120</td>
<td class="bc-supports-yes">120</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
</tr>
<tr>
<th><code>open</code></th>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes">49</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">49</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">6</td>
<td class="bc-supports-yes">1.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="summary"><code><summary></code></a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details</a>
</p>
</div>
|
