0

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!

3
  • ¿Es Bootstrap? Y si lo es, ¿qué versión? No olvides ponerlo en las etiquetas de ser así.
    – padaleiana
    Commented el 9 dic. 2023 a las 13:04
  • Puedes además mostrar un ejemplo mínimo verificable ejecutable en la pregunta misma, a través del botón que indica <>.
    – padaleiana
    Commented el 9 dic. 2023 a las 13:04
  • A ocupar toda la pantalla te referis al ancho supongo Commented el 9 dic. 2023 a las 13:09

1 respuesta 1

0

He conseguido solucionando utilizando el siguiente js para modificar la class:

mainElement.className = "col-md-9 ms-sm-auto col-lg-10 px-md-4"

Supongo que hay una forma mas eficiente pero de momento esto cumple con lo que estaba buscando.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.