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.