Acordeones W3.CSS
Haga clic en los botones "Abrir sección" a continuación para ver cómo funcionan los acordeones:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
Acordeón
Se utiliza un acordeón para mostrar (y ocultar) contenido HTML.
Use la clase w3-hide para ocultar el contenido del acordeón.
Utilice cualquier tipo de botón para abrir y cerrar el contenido:
Ejemplo
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Tanto el elemento que se utiliza para abrir el acordeón como el contenido del acordeón pueden ser cualquier elemento HTML.
Acordeón vs menú desplegable
Esta tabla muestra la diferencia entre un acordeón y un menú desplegable:
| Acordeón | Desplegable |
|---|---|
| El contenido empuja el contenido de la página hacia abajo. | El contenido se coloca sobre el contenido de la página existente. |
| El contenido suele ser 100% ancho | El contenido tiene un ancho de 160 px (predeterminado) |
| A menudo se utiliza para abrir varias secciones. | A menudo se utiliza para abrir una sección. |
acordeones
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Listas deplegables
Botones de acordeón
Puede usar cualquier elemento HTML para abrir el contenido del acordeón. Preferimos un botón con una clase de bloque w3 , para abarcar todo el ancho de la página (100% de ancho).
Recuerda que los botones en W3.CSS están centrados por defecto. Utilice la clase w3-left-align si desea que estén alineados a la izquierda. Sin embargo, no tiene que seguir nuestro enfoque: un acordeón se verá bien de cualquier manera:
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Ejemplo
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Botones de acordeón activos
Use JavaScript para resaltar los acordeones que están abiertos (en los que se hizo clic):
Some text..
Some other text..
Ejemplo
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}
Ancho acordeón
Por defecto, el ancho del bloque es 100%. Para anular esto, cambie la propiedad de ancho de CSS del contenedor de acordeón:
Some text..
Some text..
Some text..
Some text..
Ejemplo
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Contenido de acordeón
Acordeón con enlaces:
Ejemplo
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Acordeón como una lista:
- Jill
- víspera
- Adán
Ejemplo
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Acordeón dentro de una barra lateral (aprenderás más sobre las barras laterales más adelante):
Ejemplo
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
acordeones animados
Use cualquiera de las clases de w3-animate para desvanecer, acercar o deslizar el contenido del acordeón:
Ejemplo
<div id="Demo1" class="w3-hide
w3-animate-zoom">