jcduranm
- Seguidores
- 5
Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 17 Sep 2014
- Mensajes
- 267
¡Hola a todos! En esta ocasión, compartiré cómo crear un acordeón solo con HTML y CSS.
Probablemente muchos de ustedes ya estén familiarizados con el término "acordeón". Este elemento suele encontrarse en sitios de comercio electrónico o servicios, como tiendas en línea o páginas de destino.
El acordeón se utiliza para preguntas frecuentes (FAQ) o consultas comunes realizadas por clientes potenciales o compradores. También se puede usar para mostrar los términos y condiciones de los productos o servicios en su sitio web, o cualquier otra información que necesiten.
Aunque hay muchos tutoriales similares disponibles en internet, si aún no han encontrado un estilo que se adapte a su sitio web, pueden probar el que compartiré en esta ocasión.
Para ver la demostración, hagan clic en el botón a continuación. Y para aquellos que quieran probarlo, ¡vamos a ver cómo se hace!
ingresa a Blogger > tema > editar HTML,
copia el siguiente CSS y pégalo encima del código ]]></b:skin> o encima del código </style>
copien el código a continuación y pónganlo donde deseen mostrar el acordeón, ya sea en una publicación o en una página estática.
Este widget utiliza botones de radio, por lo que solo se puede abrir una fila a la vez. Si abren la segunda fila, la primera se cerrará automáticamente. Si desean poder abrir todas las filas, cambien type='radio' a type='checkbox'
Aquí también la primera fila se abre automáticamente. Si desean que esté cerrada, eliminen el atributo checked que he marcado en la primera fila.
Probablemente muchos de ustedes ya estén familiarizados con el término "acordeón". Este elemento suele encontrarse en sitios de comercio electrónico o servicios, como tiendas en línea o páginas de destino.
El acordeón se utiliza para preguntas frecuentes (FAQ) o consultas comunes realizadas por clientes potenciales o compradores. También se puede usar para mostrar los términos y condiciones de los productos o servicios en su sitio web, o cualquier otra información que necesiten.
Aunque hay muchos tutoriales similares disponibles en internet, si aún no han encontrado un estilo que se adapte a su sitio web, pueden probar el que compartiré en esta ocasión.
Para ver la demostración, hagan clic en el botón a continuación. Y para aquellos que quieran probarlo, ¡vamos a ver cómo se hace!
ingresa a Blogger > tema > editar HTML,
copia el siguiente CSS y pégalo encima del código ]]></b:skin> o encima del código </style>
CSS:
/* Acordeón */
.hidden {display: none}
.jc-acrdn-str {position: relative; margin: 30px 0 0; padding: 0; font-size: 14px; line-height: 1.7em}
.jc-acrdn-str .jc-acrdn-ktn {width: 100%; padding: 18px 0; background-color: #f0f0f029; margin-bottom: 5px; border-radius: 5px; border: 1px solid #f0f0f029; box-shadow: 0 1px 0 rgb(0 0 0 / 20%), inset 0 0 0 2px #efefef}
.jc-acrdn-str p.acc {display: none; margin: 0; padding-left: 32px; position: relative; overflow: hidden; max-height: 0; -webkit-transition: all .2s ease; transition: all .2s ease; opacity: .8}
.jc-acrdn-ttl {display: flex; align-items: center; font-weight: 900; color: #000000c4; padding: 0 5px}
.jc-acrdn-ttl span {display: flex; width: 100%}
.jc-acrdn-ttl span:before {content: '\203A'; flex: 0 0 25px; display: flex; align-items: center; justify-content: flex-start; padding: 0 5px; font-weight: 400; font-size: 25px; color: inherit; margin-top: -5px}
.jc-acrdn-inp:checked ~ .jc-acrdn-ttl span:before {transform: rotate(90deg); margin-top: 5px}
.jc-acrdn-inp:checked ~ .jc-acrdn-ttl span {color: #ffffff}
.jc-acrdn-inp:checked ~ p.acc {max-height: 100vh; margin: 0 10px; display: block}
/* Modo oscuro: ajusta la clase si es diferente o elimina esta parte */
.darkMode .jc-acrdn-str .jc-acrdn-ktn {border: 1px solid #4c4f4d; border-bottom-color: #161717; box-shadow: 0 1px 0 #161717, inset 0 0 0 2px #4c4f4d; background-color: #4c4f4d}
.darkMode .jc-acrdn-ttl {color: #b0b3b8}copien el código a continuación y pónganlo donde deseen mostrar el acordeón, ya sea en una publicación o en una página estática.
Este widget utiliza botones de radio, por lo que solo se puede abrir una fila a la vez. Si abren la segunda fila, la primera se cerrará automáticamente. Si desean poder abrir todas las filas, cambien type='radio' a type='checkbox'
Aquí también la primera fila se abre automáticamente. Si desean que esté cerrada, eliminen el atributo checked que he marcado en la primera fila.
HTML:
<center><p><span style="font-size: x-large;"><b>Con Radio</b></span></p></center>
<div class='jc-acrdn-str'>
<!--[ Acordeón 1 ]-->
<div class='jc-acrdn-ktn'>
<input class='jc-acrdn-inp hidden' id='acc1' name='accordion' type='radio' checked/>
<label class='jc-acrdn-ttl' for='acc1'>
<span>Acordeón 1</span>
</label>
<p class='acc'>En la diversidad encontramos nuestra fortaleza, abrazando cada perspectiva única para enriquecer nuestra visión colectiva.</p>
</div>
<!--[ Fin de Acordeón 1 ]-->
<!--[ Acordeón 2 ]-->
<div class='jc-acrdn-ktn'>
<input class='jc-acrdn-inp hidden' id='acc2' name='accordion' type='radio'/>
<label class='jc-acrdn-ttl' for='acc2'>
<span>Acordeón 2</span>
</label>
<p class='acc'>La armonía entre el equipo se refleja en cada proyecto, donde la pasión y la dedicación son la base de nuestra excelencia.</p>
</div>
<!--[ Fin de Acordeón 2 ]-->
<!--[ Acordeón 3 ]-->
<div class='jc-acrdn-ktn'>
<input class='jc-acrdn-inp hidden' id='acc3' name='accordion' type='radio'/>
<label class='jc-acrdn-ttl' for='acc3'>
<span>Acordeón 3</span>
</label>
<p class='acc'>Cada paso adelante en nuestra travesía es un testimonio del compromiso inquebrantable con nuestros valores y objetivos.</p>
</div>
<!--[ Fin de Acordeón 3 ]-->
<!--[ Más Acordeones aquí]-->
</div>
<center><p><span style="font-size: x-large;"><b>Con Checkbox</b></span></p></center>
<div class='jc-acrdn-str'>
<!--[ Acordeón 4 ]-->
<div class='jc-acrdn-ktn'>
<input class='jc-acrdn-inp hidden' id='acc4' name='accordion' type='checkbox'/>
<label class='jc-acrdn-ttl' for='acc4'>
<span>Acordeón 4</span>
</label>
<p class='acc'>Aenean sollicitudin se traduce a la búsqueda constante de mejora, con un enfoque firme en la innovación y el desarrollo.</p>
</div>
<!--[ Fin de Acordeón 4 ]-->
<!--[ Acordeón 5 ]-->
<div class='jc-acrdn-ktn'>
<input class='jc-acrdn-inp hidden' id='acc5' name='accordion' type='checkbox'/>
<label class='jc-acrdn-ttl' for='acc5'>
<span>Acordeón 5</span>
</label>
<p class='acc'>Frente a desafíos, nuestra resiliencia se pone a prueba, demostrando que la perseverancia y el esfuerzo conjunto conducen al éxito.</p>
</div>
<!--[ Fin de Acordeón 5 ]-->
<!--[ Acordeón 6 ]-->
<div class='jc-acrdn-ktn'>
<input class='jc-acrdn-inp hidden' id='acc6' name='accordion' type='checkbox'/>
<label class='jc-acrdn-ttl' for='acc6'>
<span>Acordeón 6</span>
</label>
<p class='acc'>La innovación nos guía, impulsándonos a explorar nuevos horizontes y a desafiar los límites de lo posible.</p>
</div>
<!--[ Fin de Acordeón 6 ]-->
<!--[ Más Acordeones aquí]-->
</div>
