Saltar al contenido

Acordeones Acordeones

Acordeones

Ejemplo de código

<!-- Aquí empieza acordeón 2022 -->
<div class="w3-accordion w3-light-grey"><button onclick="myFunc('Demo1')" class="w3-padding-hor-8 w3-btn-block w3-left-align" style="background-color: #ff6347; color: #ffffff;">Acordeón de prácticas.</button>
<div id="Demo1" class="w3-accordion-content">
<div class="w3-container">
<h4>H4</h4>
<p>Párrafo2</p>
<ul>
<li>Lista.</li>
<li>Escribir el texto mediante escritura electrónica dibujada a mano con reconocimiento: 11 minutos.<br /> <img src="/web/educamadrid/principal/files/d660984a-cb17-494a-8356-32aa740c2d83/12-21.jpg?t=1605366768884" title="12-21.jpg" width="640" height="398" /></li>
</ul>
<p>Párrafo2</p>
</div>
</div>
</div>
<script>// <![CDATA[
function myFunc(id) {
var x = document.getElementById(id);
if (x.classList) {
x.classList.toggle("w3-show");
} else {
// Fallback for IE9 and earlier
if (x.className.indexOf("w3-show") == -1)
x.className = x.className + " w3-show";
else
x.className = x.className.replace("w3-show", "");
}
}
// ]]></script>
<!-- Aquí termina acordeón 2022 -->

1. Acordeones para prácticas.

    rhethetrhrt

    ghjghj,hj,h,

    Copio y pego el código HTML.

    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

    =============CSS recopilado=============

    /* CSS para acordeón */

    .w3-accordion {width:100%;cursor:pointer}

    .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}

    .w3-padding-8{padding-top:8px!important;padding-bottom:8px!important}

    .w3-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}

    .w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

    .w3-btn-block.w3-disabled,.w3-btn-floating.w3-disabled *,.w3-btn:disabled *,.w3-btn-floating:disabled *{pointer-events:none}

    .w3-btn-block.w3-disabled:hover{box-shadow:none}

    .w3-btn-block{width:100%}

    .w3-btn-block {-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s,filter 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s,filter 0.3s}

    .w3-left-align{text-align:left!important}

    .w3-accordion-content{cursor:auto;display:none;position:relative;width:100%;margin:0;padding:0}

    .w3-accordion-content a{padding:6px 16px;display:block}.w3-accordion-content a:hover{background-color:#ccc}

    .w3-accordion-content a,.w3-dropnav a{text-decoration:none!important}

    .w3-accordion-content {-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s,filter 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s,filter 0.3s}

    .w3-show{display:block!important}

    .w3-container{padding:0.01em 16px}

    .w3-container:after {content:"";display:table;clear:both}

    .w3-left-align{text-align:left!important}

    .w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}

    .w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}

    .w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}

    /* fin CSS para acordeón */

    =========================

    Ref:

    Actualización: 2021.