files/es/web/html/element/details/index.html


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

---
title: <details>
slug: Web/HTML/Elemento/details
tags:
  - Elemento
  - Elementos HTML interactivos
  - HTML
  - HTML5
  - Referencia
  - Web
translation_of: Web/HTML/Element/details
---
<p>{{ SeeCompatTable() }}</p>

<h2 id="Resumen">Resumen</h2>

<p>El elemento HTML Details<strong> &lt;details&gt; </strong>es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th>
   <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Contenido dinámico</a> , contenido de seccionamiento, contenido interactivo, contenido palpable .</td>
  </tr>
  <tr>
   <th scope="row">Contenido permitido</th>
   <td>Un elemento  {{HTMLElement("summary")}}  seguido de <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a> </td>
  </tr>
  <tr>
   <th scope="row">Omisión de etiquetas</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elementos padres permitidos</th>
   <td>Cualquier elemento que acepte  <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">contenido dinámico</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfaz DOM</th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Este atributo Booleano indica si los detalles serán mostrados al usuario cuando la página se cargue . Por default el valor es <code>false </code>y por lo tanto los detalles estarán ocultos.</dd>
 <dd></dd>
</dl>

<h2 id="Ejemplo">Ejemplo</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="Resultado">Resultado</h3>

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

<div class="note">
<p><strong>Nota:</strong> Si el el ejemplo de arriba no funciona , ver {{anch("Compatibilidad con navegadores")}}  para determinar si el navegador soporta esta característica .</p>
</div>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificaciones</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentario</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></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>12</td>
   <td>{{CompatNo}} {{bug(591737)}}</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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>4.0</td>
   <td>{{CompatNo}} {{bug(591737)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"></h2>

<h2 id="Ver_también">Ver también</h2>

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

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