0

Ya estuve toda la tarde buscando el error pero no me es posible encontrarlo. Soy nuevo con Javascript y me cuesta bastante. Les dejo el codigo para que lo puedan corregir. No se cual es la falla. Quiero que ese articulo quede pequeño y luego agrandarlo con el boton "Mostrar mas" asi puedo usar el evento. Pero no me lo crea. No se si alguna propiedad del CSS me lo bloquea, no se ya estoy divagando jejeje. Gracias gente.

//Evento boton Mostrar mas
const articulo =document.querySelector("#intro");
const button = document.querySelector("#miBoton");

button.addEventListener("click", leerMas);

function leerMas() {
  if (articulo.className = "abierto") {
    articulo.className = "";
    button.textContent = "Mostrar mas"
  } else {
    articulo.className = "abierto";
    button.textContent = "Mostrar menos"
  }
}

Y ahora el HTML

<h1>Buscador de Autos Usados</h1>
        <h2>Busqueda de Autos según nombre de la Marca.</h2>
        <h3>"Audi, BMW, Chevrolet, Dodge, Ford, Mercedes Benz, o Renault"</h3>
    <article id="intro">
        <p>Nos destacamos como uno de los sitios donde se puede encontrar la mayor cantidad de vehículos de Rosario y la región. </p>

        <p>En el 2021,  el rubro de ventas usados en sitios web, comienza a tomar su propia forma.</p>
            
        <p>El servicio está orientado a brindar una herramienta práctica para la localización y ofrecimiento de vehículos, trazando un contacto directo entre comprador y vendedor.</p>
            
        <p>Actualmente contamos con un flujo de aproximadamente unas 700 visitas diarias que navegan integramente el sitio.</p>
            
        <p>Estas características nos permiten ofrecer a las empresas un servicio autoadministrable que asegura que sus productos serán visitados por nuestra comunidad de usuarios.</p>
            
        <p>Si le interesa obtener mayor información acerca de como su concesionaria o agencia puede ser parte de nuestro sitio web, 
            no deje de enviarnos su consulta ingresando sus datos en el formulario de contacto y un representante se comunicará con usted para brindarle todo el detalle necesario.</p>
        <p>[email protected]</p>
    </article>
    <button id="miBoton">Mostrar Más :)</button>

Y por las dudas el CSS porque ahi es donde esoy jugando con el Articulo.

body {
    height: 665px;
    background-image: url("http://2.bp.blogspot.com/-cnbaEWFI7_Q/UM9lRastQII/AAAAAAAAAC0/Wu_30QOprlk/s1600/Lamborghini+Aventador+LP700-4+2011+(11).jpg");
    background-size: 100%;
    display: flexbox;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

h1,h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    padding: 3rem 0;
    margin: 0;
    text-transform: uppercase;
    text-align: center;
}
h3 {
    text-transform: uppercase;
    text-align: center;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
article {
    width: 400px;
    padding: 20px 20px 0;
    font-size: 18px;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 1s;
    text-align: justify;
    margin-top: 20px;
}
p {
    margin-bottom: 16px;
}
article.abierto {
    max-height: 1000px;
}
button {
    background: #0e0b22;
    color: #4facfe;
    padding: 0.6rem;
    margin-top: 20px;
    border: none;
    border-radius: 4px;
}
button:hover {
    cursor: pointer;
    background: #00f2fe;
}

Muchas gracias de antemano por tomarse el tiempo. Mil Gracias.

1 respuesta 1

0

Hice una pequeña modificacion:

En la etiqueta HTML article, agregué una clase "cerrado", así podremos identificar cuando está cerrado el articulo a leer:

<article id="intro" class="cerrado">

Como segundo paso, agregué un estilo a esa clase cerrado que es de 200px el max-height, y removí el max-height aplicada en la etiqueta article:

article {
    width: 400px;
    padding: 20px 20px 0;
    font-size: 18px;
    overflow: hidden;
    transition: max-height 1s;
    text-align: justify;
    margin-top: 20px;
}

article.cerrado {
    max-height: 200px;
}

Y en ultima instancia, el javascript quedó de la siguiente forma:

function leerMas() {
    if (articulo.className == "cerrado") {
        articulo.className = "abierto";
        button.textContent = "Mostrar menos"
    } else {
        articulo.className = "cerrado";
        button.textContent = "Mostrar más :)"
    }
}

Donde se compara si el articulo tiene la clase cerrado, que se modifique por abierto, y si es al contrario, que se contraiga.

Espero haberte ayudado

3
  • Muchas gracias por tomarte el tiempo de responder antes que nada. Cuando llegue a casa lo pruebo y si funciona te doy la solución. Gracias Commented el 18 ago. 2022 a las 20:17
  • Quedo de maravillas, mil Gracuas Dabydat! Commented el 18 ago. 2022 a las 21:06
  • Gracias por tu comentario! Los votos emitidos por quienes tienen menos de 15 de reputación se registran, pero no cambian la puntuación que se muestra públicamente. Ese cartel me sale cuando voto la respuesta! Perdon! Commented el 18 ago. 2022 a las 21:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.