Componente web personalizado para mostrar contenido colapsable con funcionalidad "mostrar más" / "mostrar menos", ideal para textos largos, descripciones de productos o cualquier contenido que requiera ser expandible.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in est at nulla scelerisque scelerisque. Vivamus feugiat metus eu orci tincidunt, non fringilla quam sagittis. Quisque feugiat diam nec diam faucibus imperdiet. Sed vestibulum orci vel ligula tincidunt, a bibendum erat posuere. Sed in lacus vel justo consectetur lacinia. Nulla facilisi. Phasellus ac sapien vel massa pulvinar tempus.
Proin consequat turpis vel nisl congue, vel dignissim est volutpat. Mauris vel nisi at justo fermentum bibendum. Fusce non arcu at justo malesuada fermentum. Curabitur ultrices ante vel ex tincidunt, a efficitur lectus ultrices. Mauris euismod sapien vel enim malesuada, non fringilla mi tempus.
<!-- Importar el componente -->
<script src="show-more-content/index.js"></script>
<link rel="stylesheet" href="show-more-content/index.css">
<!-- Implementación básica -->
<show-more-content>
<div data-collapsable>
<h3>Descripción del producto</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Proin consequat turpis vel nisl congue, vel dignissim...</p>
</div>
<button type="button" hidden data-toggle-button
data-label-not-collapsed='Leer menos'
data-label-collapsed='Leer más'>Leer más</button>
</show-more-content>/* Estilo personalizado */
.long-text [data-collapsable] {
--max-height: 100px;
}
.long-text button[data-toggle-button] {
color: #2196F3;
background: none;
border: none;
font-weight: bold;
cursor: pointer;
}<show-more-content class="product-features">
<div data-collapsable>
<h3>Características</h3>
<ul>
<li><strong>Material:</strong> Aluminio de alta resistencia</li>
<li><strong>Dimensiones:</strong> 15 x 20 x 5 cm</li>
<li><strong>Peso:</strong> 350g</li>
<!-- Más características... -->
</ul>
</div>
<button type="button" hidden data-toggle-button
data-label-not-collapsed='Ver menos características'
data-label-collapsed='Ver todas las características'>
Ver todas las características
</button>
</show-more-content>.product-features [data-collapsable] {
--max-height: 150px;
}
.product-features button[data-toggle-button] {
color: #0066cc;
font-weight: bold;
border: none;
background: transparent;
cursor: pointer;
}Lo compré hace un mes y funciona perfectamente. La batería dura todo el día incluso con uso intensivo. Recomendado.
El producto cumple con lo prometido. Me gusta el diseño y la calidad de construcción. Lo único que mejoraría es el tiempo de carga.
Superó mis expectativas. Funciona a la perfección y la entrega fue muy rápida.
Funciona bien, pero esperaba un poco más de rendimiento. El servicio al cliente fue excelente cuando tuve algunas dudas sobre su uso.
<show-more-content class="user-reviews" data-initial-expanded>
<div data-collapsable>
<h3>Opiniones de clientes</h3>
<div class="review">
<div class="stars">★★★★★</div>
<h4>Excelente producto</h4>
<p>Lo compré hace un mes y funciona perfectamente...</p>
</div>
<!-- Más reseñas... -->
</div>
<button type="button" hidden data-toggle-button
data-label-not-collapsed='Mostrar menos opiniones'
data-label-collapsed='Mostrar todas las opiniones'>
Mostrar todas las opiniones
</button>
</show-more-content>.user-reviews [data-collapsable] {
--max-height: 200px;
}
.user-reviews [data-collapsable].collapsed {
mask-image: linear-gradient(to top, transparent, rgb(0,0,0) 80%);
}
.user-reviews button[data-toggle-button] {
padding: 8px 16px;
border-radius: 20px;
background-color: #f0f0f0;
border: 1px solid #ddd;
margin-top: 10px;
}Al utilizar este componente, aceptas los siguientes términos y condiciones:
<show-more-content class="styled-content">
<div data-collapsable>
<h3>Términos y condiciones</h3>
<p>Al utilizar este componente, aceptas los siguientes términos...</p>
<ol>
<li>El componente se proporciona "tal cual", sin garantías...</li>
<!-- Más términos... -->
</ol>
</div>
<button type="button" hidden data-toggle-button
data-label-not-collapsed='Ocultar términos completos'
data-label-collapsed='Leer términos completos'>
Leer términos completos
</button>
</show-more-content>.styled-content [data-collapsable] {
--max-height: 100px;
background-color: rgba(0, 0, 0, 0.05);
padding: 15px;
border-radius: 8px;
}
.styled-content [data-collapsable].collapsed {
mask-image: linear-gradient(
to top,
transparent 0%,
rgba(0, 0, 0, 0.8) 70%,
rgb(0, 0, 0) 100%
);
}
.styled-content button[data-toggle-button] {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
margin-top: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.styled-content button[data-toggle-button]:hover {
background-color: #388E3C;
}