Me gustaría saber como hacer un evento para cuando de click en ver mas se me despliegue el contenido oculto me podrían ayudar con ese codigo?
Me gustaría saber como hacer un evento para cuando de click en ver mas se me despliegue el contenido oculto me podrían ayudar con ese codigo?
Hola...Para lograr que se despliegue el contenido oculto cuando se hace clic en un botón "Ver más", puedes utilizar JavaScript para manipular el estilo del elemento oculto y mostrarlo. Aquí tienes un ejemplo de cómo lograrlo donde colocamos el codigo dentro del archi html .. Justo antes del cierre del body..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/stilo.css">
</head>
<body>
<button id="verMas">Ver más</button>
<div id="contenidoOculto" style="display: none;">
<!-- Contenido oculto -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, justo at tempus bibendum, diam massa
consectetur purus, id auctor magna quam sit amet ex.
</div>
<script>
const botonVerMas = document.getElementById('verMas');
const contenidoOculto = document.getElementById('contenidoOculto');
botonVerMas.addEventListener('click', function () {
if (contenidoOculto.style.display === 'none') {
contenidoOculto.style.display = 'block';
botonVerMas.textContent = 'Ver menos';
} else {
contenidoOculto.style.display = 'none';
botonVerMas.textContent = 'Ver más';
}
});
</script>
</body>
</html>
Funciona... ya lo probe espero responder tu inquietud
tambiem podrias utilizar este otro script :
<script>
const botonVerMas = document.getElementById('verMas');
const contenidoOculto = document.getElementById('contenidoOculto');
botonVerMas.addEventListener('click', function () {
contenidoOculto.style.display = contenidoOculto.style.display === 'none' ? 'block' : 'none';
botonVerMas.textContent = contenidoOculto.style.display === 'none' ? 'Ver más' : 'Ver menos';
});
</script>
el codigo seria el siguiente y quedaria igual pero utilizando operador ternario..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/stilo.css">
</head>
<body>
<button id="verMas">Ver más</button>
<div id="contenidoOculto" style="display: none;">
<!-- Contenido oculto -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus, justo at tempus bibendum, diam massa
consectetur purus, id auctor magna quam sit amet ex.
</div>
<script>
const botonVerMas = document.getElementById('verMas');
const contenidoOculto = document.getElementById('contenidoOculto');
botonVerMas.addEventListener('click', function () {
contenidoOculto.style.display = contenidoOculto.style.display === 'none' ? 'block' : 'none';
botonVerMas.textContent = contenidoOculto.style.display === 'none' ? 'Ver más' : 'Ver menos';
});
</script>
</body>
</html>