No estoy seguro de por qué esto no funciona. ¿Podría ser la forma en que escribí mi nombre de identificación y el nombre de la clase? Escribí de esa manera con fines de demostración.
Revisé la ortografía y hasta ahora todo bien. Tu ayuda será muy apreciada. He leído en alguna parte que siempre se recomienda usar:
content.classList.add("open")en vez de:
content.className = "open"ya que este último puede eliminar todas las demás clases que existen en el elemento de contenido.
Aquí está mi código:
let contentVar = document.getElementById("idOfcontent"); let buttonVar = document.getElementById("idOfshowmore"); buttonVar.onclick = function() { if (contentVar.className == "classOfopen") { // shrink the box contentVar.className = ""; buttonVar.innerHTML = "Show More"; } else { // expand the box contentVar.className = "classOfopen"; buttonVar.innerHTML = "Show Less"; } } body { background: #eee; } #idOfcontent { width: 400px; background: #ffff; padding: 18px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 18px; color: #444; margin: 0 auto; max-height: 100px; overflow: hidden; /* Set transitions up */ -webkit-transition: max-height 0.7s; -moz-transition: max-height 0.7s; transition: max-height 0.7s; } #idOfcontent .classOfopen { max-height: 5000px; /* Set transitions up */ /* for smooth transition */ -webkit-transition: max-height 0.7s; -moz-transition: max-height 0.7s; transition: max-height 0.7s; } #idOfshowmore { background: #1594e5; color: #ffffff; font-family: Verdana, Geneva, Tahoma, sans-serif; display: block; width: 140px; font-size: 17pxx; text-transform: uppercase; padding: 10px; text-align: center; margin: 20px auto; cursor: pointer; } <div id="idOfcontent"> <p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p> <p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p> <p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.</p> </div> <a id="idOfshowmore">Show More</a>su selector css está mal.
#idOfcontent .classOfopenSelecciona un descendiente de #idOfcontent con la clase classOfopen. lo que quieres es:
#idOfcontent.classOfopenQue es un elemento con id idOfcontent y class classOfopen.
En otra nota, es mejor usar classList en lugar de editar directamente className. Esto quedará claro una vez que intente manipular más de una clase a la vez.
Aquí está su fragmento de código fijo,
let contentVar = document.getElementById("idOfcontent"); let buttonVar = document.getElementById("idOfshowmore"); buttonVar.onclick = function() { if (contentVar.className == "classOfopen") { // shrink the box contentVar.className = ""; buttonVar.innerHTML = "Show More"; } else { // expand the box contentVar.classList.add('classOfopen'); /* classList.add() is the correct way of adding classes */ buttonVar.innerHTML = "Show Less"; } } body { background: #eee; } #idOfcontent { width: 400px; background: #ffff; padding: 18px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 18px; color: #444; margin: 0 auto; max-height: 100px; overflow: hidden; /* Set transitions up */ -webkit-transition: max-height 0.7s; -moz-transition: max-height 0.7s; transition: max-height 0.7s; } #idOfcontent.classOfopen { /* <- removed the space */ max-height: 1000px; /* Set transitions up */ /* for smooth transition */ -webkit-transition: max-height 0.7s; -moz-transition: max-height 0.7s; transition: max-height 0.7s; } #idOfshowmore { background: #1594e5; color: #ffffff; font-family: Verdana, Geneva, Tahoma, sans-serif; display: block; width: 140px; font-size: 17pxx; text-transform: uppercase; padding: 10px; text-align: center; margin: 20px auto; cursor: pointer; } <div id="idOfcontent"> <p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p> <p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p> <p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.</p> </div> <a id="idOfshowmore">Show More</a> Pero no se recomienda usar max-height para las cajas de acordeón, o plegables donde se usa aceleración o animación, puede leer este blog para ayudarlo a abordar la demora antes de que se cierre el acordeón
Hay un espacio en tu selector:
#idOfcontent .classOfopen debe ser #idOfcontent.classOfopen . La versión con el espacio selecciona un (gran) hijo con la clase classOfOpen , mientras que la segunda se refiere al elemento por ID idOfcontent con la clase classOfOpen .
let contentVar = document.getElementById("idOfcontent"); let buttonVar = document.getElementById("idOfshowmore"); buttonVar.onclick = function() { if (contentVar.className == "classOfopen") { // shrink the box contentVar.className = ""; buttonVar.innerHTML = "Show More"; } else { // expand the box contentVar.className = "classOfopen"; buttonVar.innerHTML = "Show Less"; } } body { background: #eee; } #idOfcontent { width: 400px; background: #ffff; padding: 18px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 18px; color: #444; margin: 0 auto; max-height: 100px; overflow: hidden; /* Set transitions up */ -webkit-transition: max-height 0.7s; -moz-transition: max-height 0.7s; transition: max-height 0.7s; } #idOfcontent.classOfopen { max-height: 5000px; /* Set transitions up */ /* for smooth transition */ -webkit-transition: max-height 0.7s; -moz-transition: max-height 0.7s; transition: max-height 0.7s; } #idOfshowmore { background: #1594e5; color: #ffffff; font-family: Verdana, Geneva, Tahoma, sans-serif; display: block; width: 140px; font-size: 17pxx; text-transform: uppercase; padding: 10px; text-align: center; margin: 20px auto; cursor: pointer; } <div id="idOfcontent"> <p>In this JavaScript tutorial I want to run through a detailed example of how we can use the onclick event in JavaScript to create cool functionality on our websites.</p> <p> In this example I'll use the onclick event to create a 'show more' style content box which expands and shrinks as you click the button. </p> <p>The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.</p> </div> <a id="idOfshowmore">Show More</a>