Revision 1132139 of <details>

<div>{{HTMLRef}}</div>

<h2 id="Summary">Summary</h2>

<p>The <em>HTML Details Element</em> (<code><strong>&lt;details&gt;</strong></code>) is used as a disclosure widget from which the user can retrieve additional information.</p>

<table class="properties">
	<tbody>
		<tr>
			<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
			<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td>
		</tr>
		<tr>
			<th scope="row">Permitted content</th>
			<td>One {{HTMLElement("summary")}} element followed by <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
		</tr>
		<tr>
			<th scope="row">Tag omission</th>
			<td>{{no_tag_omission}}</td>
		</tr>
		<tr>
			<th scope="row">Permitted parent elements</th>
			<td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
		</tr>
		<tr>
			<th scope="row">DOM interface</th>
			<td>{{domxref("HTMLDetailsElement")}}</td>
		</tr>
	</tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<dl>
	<dt>{{htmlattrdef("open")}}</dt>
	<dd>This Boolean attribute indicates whether the details will be shown to the user on page load. Default is <code>false</code> and so details will be hidden.</dd>
</dl>

<h2 id="Example">Example</h2>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;Some details&lt;/summary&gt;
  &lt;p&gt;More info about the details.&lt;/p&gt;
&lt;/details&gt;
</pre>

<h3 id="Live_result">Live result</h3>

<p>{{EmbedLiveSample("Example")}}</p>

<div class="note">
<p><strong>Note:</strong> If the live sample above doesn't work for you, see {{anch("Browser compatibility")}} to determine if your browser supports the feature at all.</p>
</div>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
	<thead>
		<tr>
			<th scope="col">Specification</th>
			<th scope="col">Status</th>
			<th scope="col">Comment</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
			<td>{{Spec2('HTML WHATWG')}}</td>
			<td> </td>
		</tr>
		<tr>
			<td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '&lt;details&gt;')}}</td>
			<td>{{Spec2('HTML5.1')}}</td>
			<td>Initial definition</td>
		</tr>
	</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
	<tbody>
		<tr>
			<th>Feature</th>
			<th>Chrome</th>
			<th>Firefox (Gecko)</th>
			<th>Internet Explorer</th>
			<th>MS Edge</th>
			<th>Opera</th>
			<th>Safari</th>
		</tr>
		<tr>
			<td>Basic support</td>
			<td>12</td>
			<td>{{CompatGeckoDesktop("49.0")}}<sup>[1]</sup></td>
			<td>{{CompatNo}}</td>
			<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&amp;search=details">Under consideration</a></td>
			<td>15</td>
			<td>6</td>
		</tr>
	</tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
	<tbody>
		<tr>
			<th>Feature</th>
			<th>Android</th>
			<th>Firefox Mobile (Gecko)</th>
			<th>IE Mobile</th>
			<th>Opera Mobile</th>
			<th>Safari Mobile</th>
		</tr>
		<tr>
			<td>Basic support</td>
			<td>4.0</td>
			<td>{{CompatGeckoMobile("49.0")}}<sup>[1]</sup></td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
		</tr>
	</tbody>
</table>
</div>

<p>[1] This feature is available since Firefox 47 behind the preference <code>dom.details_element.enabled</code>, defaulting to <code>false</code>, except on Nightly and Aurora versions ({{bug(1241750)}}). Support for it is enabled by default, i.e. the preference is defaulting to <code>true</code>, since Firefox 49.0 ({{bug("1226455")}}).</p>

<h2 id="See_also">See also</h2>

<ul>
	<li>{{HTMLElement("summary")}}</li>
</ul>