---
title: <details>
slug: Web/HTML/Element/details
tags:
  - Element
  - Elementy interaktywne HTML
  - Referencja
  - Web
  - details
translation_of: Web/HTML/Element/details
---
<div>{{HTMLRef}}</div>

<p><strong><code><font face="Open Sans, arial, x-locale-body, sans-serif">Element </font>&lt;details&gt;</code></strong> w języku HTML<strong> </strong>jest używany jako widżet (określany często jako spoiler), z którego użytkownik może uzyskać dodatkowych informacji.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategoria treści</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, root sekcji, treść interaktywna, treść klikalna.</td>
  </tr>
  <tr>
   <th scope="row">Dopuszczalna zawartość</th>
   <td>Jeden element {{HTMLElement("summary")}} będący bezpośrednim pierwszym dzieckiem</td>
  </tr>
  <tr>
   <th scope="row">Znaczniki pomijane</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Dopuszczalni rodzice</th>
   <td>Dowolny element <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rola ARIA</th>
   <td>Brak</td>
  </tr>
  <tr>
   <th scope="row">Interfejs w DOM</th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atrybuty">Atrybuty</h2>

<p>Istnieje możliwość dopisania do elementu  <a href="/en-US/docs/Web/HTML/Global_attributes">atrybutów globalnych</a>.</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Boolean świadczący o tym, czy element ma być otwarty bądź zamknięty po załadowaniu strony. Domyślnie jest to wartość <code>false</code> mówiąca elementowi, aby był zamknięty.</dd>
</dl>

<h2 id="Przykład">Przykład</h2>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;Szczypta detali&lt;/summary&gt;
  &lt;p&gt;Informacje szczegółowe na dany temat.&lt;/p&gt;
&lt;/details&gt;

&lt;details open&gt;
  &lt;summary&gt;Jeszcze wiecej szczegółów&lt;/summary&gt;
  &lt;p&gt;Tu jest jeszcze wiecej informacji szczegółowych&lt;/p&gt;
&lt;/details&gt;
</pre>

<h3 id="Rezultat">Rezultat</h3>

<p>{{EmbedLiveSample("Przykład")}}</p>

<div class="note">
<p><strong>Note:</strong> Jeżeli rezultat nie działa u Ciebie poprawnie, zobacz {{anch("kompatybilność z przeglądarkami")}}, aby sprawdzić, czy Twoja przegladarka wspiera ten element.</p>
</div>

<h2 id="Przykład_z_ostylowaniem">Przykład z ostylowaniem</h2>

<p>Zgodnie z najnowszą specyfikacją, Firefox generuje element summary jako <code>display: list-item</code> przez co może być stylowany tak jak elementy listy. Zgodnie ze starszą specyfikacją, Chrome oraz Safari posiadają  <code>::-webkit-details-marker</code> pseudo element, który może być stylowany.</p>

<p>Dla cross-browsingu, Firefox ukrywa znacznik summary poprzez <code>summary { display: block }</code>, a z kolei Chrome i Safari poprzez <code>::-webkit-details-marker {display: none;}</code>. Stylowanie może być wtedy odpowiednio przeprowadzone.<br>
 Przykład poniżej używa CSSa umozliwiajacego powrót znacznika do punktu wyjścia</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;Szczypta detali&lt;/summary&gt;
  &lt;p&gt;Informacje szczegółowe na dany temat.&lt;/p&gt;
&lt;/details&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">summary {
  display: block;
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] &gt; summary::before {
  content: '\25BC';
}
</pre>

<h3 id="Rezultat_2">Rezultat</h3>

<p>{{ EmbedLiveSample('Przykład_z_ostylowaniem') }}</p>

<h2 id="Specyfikacja">Specyfikacja</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', 'forms.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>Początkowa definicja</td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>12</td>
   <td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&amp;search=details">In Development</a></td>
   <td>{{CompatGeckoDesktop("49.0")}}</td>
   <td>{{CompatNo}}</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>Edge</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><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary?filter=f3f0000bf&amp;search=details">In Development</a></td>
   <td>{{CompatGeckoMobile("49.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>6.1</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Zobacz_także">Zobacz także</h2>

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