---
{
	"title": "Correctif « details/summary » (contenu affichable/masquable)",
	"language": "fr",
	"category": "Correctifs",
	"categoryfile": "polyfills",
	"description": "Émule les éléments « details » et « summary » pour les navigateurs qui ne le supportent pas. Les éléments « details » et « summary » éléments permettent au contenu d'être affiché et masqué.",
	"altLangPrefix": "details",
	"dateModified": "2014-08-04"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>But</h2>
	<p>Les éléments <code>details</code> et <code>summary</code> éléments permettent au contenu d'être affiché et masqué. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité à l'aide de HTML générique et WAI-ARIA.</p>
</section>

<div lang="en">
<p><strong>Needs translation</strong></p>
<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/details/details-en.html">English examples</a></li>
		<li><a href="../../../demos/details/details-fr.html">French examples</a></li>
	</ul>
</section>

<section>
	<h2>How to implement</h2>
	<p>To use the polyfill, standard <code>details</code> and <code>summary</code> elements must be used. In cases where a browser doesn't support these elements, the polyfill is automatically loaded.</p>
</section>

<section>
	<h2>Configuration options</h2>
	<p><a rel="external" href="https://www.w3.org/TR/html51/interactive-elements.html#the-details-element">Configuration options available for the <code>details</code> and <code>summary</code> elements (HTML5 specification)</a></p>
</section>

<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>wb-init.wb-details</td>
				<td>Triggered manually (e.g., <code>$elm.trigger( "wb-init.wb-details" );</code>).</td>
				<td>Used to manually initialize the details/summary polyfill on a summary element. <strong>Note:</strong> The details/summary polyfill will be initialized automatically unless the <code>summary</code> element is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-init.wb-details</code></td>
				<td>Triggered manually (e.g., <code>$( "summary" ).trigger( "wb-init.wb-details" );</code>).</td>
				<td>Used to manually initialize the details/summary polyfill on a <code>summary</code> element. <strong>Note:</strong> The details/summary polyfill will be initialized automatically unless the <code>summary</code> is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-details</code> (v4.0.5+)</td>
				<td>Triggered automatically after the details/summary polyfill initializes. <strong>Note:</strong> This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native details/summary support.</td>
				<td>Used to identify where the details/summary polyfill initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-details", "summary", function( event ) {
});</code></pre>
					<pre><code>$( "summary" ).on( "wb-ready.wb-details", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/polyfills/details">Details/summary polyfill source code on GitHub</a></p>
</section>
</div>