#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Photopea, editor de imágenes gratis
Plantilla ClickMag-2
Introducción al HTML
Hacer tooltip con una imagen
Rutinas The Ordinary
Personalizar la primera letra de las entradas del blog
Convertidor PDF, JPG, Word, Excel, PNG...
Efectos imágenes para las entradas de nuestro blog
Plantilla Vogue
Cómo Insertar un PDF en excel
Botón subir arriba
Calcular el porcentaje

Acordeon ocultar texto en tus entradas


Vamos a aprender hoy con un simple código como podemos poner en nuestras entradas un texto largo y poder ocultarlo fácilmente.



ver código 

<meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel"> <p>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.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>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.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>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.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script>

Accordion

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.

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.

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.



Modifica donde esta marcado en rojo por el tema 

y lo marcado en azul por el texto.


Publicar un comentario

2 Comentarios

  1. Es muy buen truco, el problema con mis entradas es que cuando paso a un menú me aparece encima del contenido parte de las entradas como por ejemplo la palabra Leer mas y me daña el aspecto de la página, gracias por su consideración

    ResponderEliminar
    Respuestas
    1. le recomiendo que lo ponga directamente en la entrada, no en un gadget

      Eliminar

En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias