tengo un main en bootstrap 5 que quiero que pase a ocupar todo el ancho de la pantalla cuando oculto la sidebar.
<main id="mainElement" class="col-md-12 ms-sm-auto col-lg-12 px-md-4">
El js que estoy usando para ocultar la sidebar me la oculta correctamente pero no me cambia las clases del main, es el siguiente:
function toggleSidebar() {
var sidebar = document.getElementById("mySidebar");
var toggleIcon = document.getElementById("toggleIcon");
var mainElement = document.getElementById("mainElement");
if (sidebar.style.display === "none" || sidebar.style.display === "") {
sidebar.style.display = "block";
toggleIcon.innerHTML = "<<";
// Remueve la clase actual
mainElement.classList.remove("col-md-9");
mainElement.classList.remove("col-lg-10");
// Agrega la nueva clase
mainElement.classList.add("col-md-12");
mainElement.classList.add("col-lg-12");
} else {
sidebar.style.display = "none";
toggleIcon.innerHTML = ">>";
// Remueve la clase actual
mainElement.classList.remove("col-md-12");
mainElement.classList.remove("col-lg-12");
// Agrega la nueva clase
mainElement.classList.add("col-md-9");
mainElement.classList.add("col-lg-10");
}
};
Le estoy dando vueltas pero no entiendo porque no me cambia la clase, alguna idea de que puede ser?
Saludos!
<>
.