Estoy tratando de cambiar class de ninguno a active usando document.getElementById pero solo está agregando active , no eliminándolo.
página.html
function toggleIt() { let collapseModel = document.getElementById(`collap_id`).className += "content active"; collapseModel[0].classList.toggle("active") } .content { padding: 10px 20px; display: none; overflow: hidden; background-color: #f1f1f1; } .content.active { padding: 10px 20px; display: block; overflow: hidden; background-color: #f1f1f1; } <button onclick="toggleIt();">Open</button> <div class="content" id="collap_id"> Here will be all the details </div> Cuando hago clic en toggle it se abre pero no se cierra, también muestra "Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')"
Lo he intentado muchas veces pero no se alterna.
1) getElementById le dará un solo elemento HTML, por lo que no es necesario usar index.
2) Solo tienes que alternarlo usando el método de toggle
function toggleIt() { let collapseModel = document.getElementById(`collap_id`); collapseModel.classList.toggle("active") } function toggleIt() { let collapseModel = document.getElementById(`collap_id`); collapseModel.classList.toggle("active") } .content { padding: 10px 20px; display: none; overflow: hidden; background-color: #f1f1f1; } .content.active { padding: 10px 20px; display: block; overflow: hidden; background-color: #f1f1f1; } <button onclick="toggleIt();">Open</button> <div class="content" id="collap_id"> Here will be all the details </div>Aquí está mi propuesta con el uso de querySelector y addEventListener .
const btn = document.querySelector(".btn"); const msg = document.querySelector(".content"); btn.addEventListener("click", () => { msg.classList.toggle("active"); }); .content { display: none; } .active { padding: 10px 20px; display: block; overflow: hidden; background-color: #f1f1f1; } <button class="btn"> open </button> <div class="content" id="collap_id"> Using querySelector and addEventListener. </div>