Acordeón
Un acordeón se utiliza para mostrar (y ocultar) el contenido que se divide en secciones.
Haga clic en los botones "sección abierta" a continuación para ver cómo funciona:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Acordeón con imágenes:
Trolltunga, Noruega
La clase W3-acordeón define un acordeón, y la clase W3-acordeón contenido define la parte que se mostrará:
Ejemplo
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</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 y el contenido del acordeón puede ser cualquier elemento HTML.
Acordeón desplegable vs.
La siguiente lista muestra la diferencia entre un acordeón y un menú desplegable:
acordeones
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- El contenido es 100% de ancho (se extiende por toda la anchura del elemento padre)
- Cuando está abierto, empuja el contenido de la página hacia abajo, en su caso (position: relative)
- A menudo se utiliza para "abrir" múltiples secciones
Botones de acordeón
Se puede utilizar cualquier elemento HTML para abrir el contenido de acordeón. Preferimos un botón con una clase w3-btn-bloque, ya que se extiende por toda la anchura de su elemento padre, al igual que el contenido de acordeón (100% anchura). Recuerde que los botones en W3.CSS se centran de forma predeterminada. Utilice la clase W3-izquierda-align si desea que la izquierda en vez. Sin embargo, usted no tiene que seguir nuestro enfoque - un acordeón se verá bien en ambos sentidos:
Vestibulum ...
Vestibulum ...
Centrada en los contenidos, así!
Ejemplo
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>Acordeón activos Botones
El uso de JavaScript para resaltar acordeones que están abiertos (clic en):
Algún texto..
Un texto diferente ..
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 de acordeón
Por defecto, la anchura de un acordeón es 100%. Para anular este, cambie la propiedad CSS anchura del contenedor w3-acordeón:
Algún texto..
Algún texto..
Algún texto..
Algún texto..
Ejemplo
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>contenido del acordeón
Acordeón con los enlaces:
Ejemplo
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Acordeón como una tarjeta con las listas:
- Jill
- Víspera
- Adán
Ejemplo
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Acordeón dentro de un Sidenav(Nota: usted aprenderá más sobre las navegaciones secundarios más adelante):
Ejemplo
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>acordeones animados
Utilice cualquiera de las clases w3-animate- a desvanecerse, el zoom o deslizarse en el contenido de acordeón: