Estoy tratando de activar la visibilidad de un DIV a través de un botón.
Mi código se ve así:
function myFunction() { var moreText = document.getElementById("csrmore"); var x = document.getElementById("myDIV"); let ishidden = x.classList.contains("hidden") if (ishidden == true) { x.classList.remove("hidden"); x.classList.add("shown"); moreText.innerHTML = "Show less"; } else { x.classList.remove("shown"); x.classList.add("hidden"); moreText.innerHTML = "Show more"; } } div { width: 100px; height: 100px; } .hidden { display:none } .shown { display:block; } <button id="csrmore" onclick="myFunction()"> Show more </button> <div id="myDIV" class="hidden"> This is the triggerable content. </div>Violín: https://jsfiddle.net/6zxa0Lg2/
Funciona bien, sin embargo, dado que soy un iniciador de JS, me preguntaba si esto es una mala práctica o es un código totalmente bueno.
Gracias por cada ayuda :)
Aquí hay otra manera de hacerlo. Hazlo todo relativo. Se hace clic en el botón y el javascript encuentra el contenido asociado a ese botón para mostrar/ocultar. De esta manera, no necesita ninguna etiqueta de identificación y puede tener tantos botones mostrar/ocultar como desee en la página.
document.addEventListener('DOMContentLoaded', () => { // after the page loads... document.querySelectorAll('.csrmore').forEach(button => { // find all the 'show more' buttons and for each one... button.addEventListener('click', e => { // when someone clicks this button let content = e.target.closest('.container').querySelector('.content'); // find the content div associated with this button content.classList.toggle('hidden'); // toggle on or off the content e.target.innerText = content.classList.contains('hidden') ? 'Show more' : 'Hide'; // change the text of the button }) }) }) div { width: 100px; height: 100px; } .hidden { display: none } <div class='container'> <button class="csrmore"> Show more </button> <div class="content hidden"> This is the triggerable content. </div> </div> <hr> <div class='container'> <button class="csrmore"> Show more </button> <div class="content hidden"> This is the triggerable content. </div> </div>¡Esta es una buena manera de hacer esto! Esta no es la solución que no se me hubiera ocurrido, pero en realidad es bastante inteligente. Hubiera pensado hacerlo cambiando TARGET.style.visibility a "oculto" o "visible" al hacer clic en el botón. Sin embargo, de nuevo, ¡tu código se ve perfectamente bien!