Cambiar valor de clase con Javascript

publicado por: Anonymous

Buenas tengo un boton que oculta un menu con javascript, este menu ocupa dos columnas (bootstrap) y lo de mas de la pagina son 10 columnas.

<!-- Menu -->
<div class="col-md-2 col-sm-2 col-xs-12" id="izquierda>
<!-- Pagina -->
<div class="col-md-10 col-sm-10 col-xs-12" id="derecha>

Lo que necesito es poder cambiar el valor de la clase al ocultar o mostrar el menu:

Al Ocultar():
Izquierda : “col-md-0 col-sm-0 col-xs-12”
Derecha: “col-md-12 col-sm-12 col-xs-12”

Al Mostrar():
Izquierda : “col-md-2 col-sm-2 col-xs-12”
Derecha: “col-md-10 col-sm-10 col-xs-12”

Con este script oculto o muestro el menu y le cambio el valor al boton para que diga mostrar u ocultar segun corresponda:

<script>
function Mostrar(){
  document.getElementById("fondo").style.display = "block";
}
function Ocultar(){
  document.getElementById("fondo").style.display = "none";
}
function Mostrar_Ocultar(){
    var fondo = document.getElementById("fondo");
    if(fondo.style.display == "none"){
      Mostrar();
      document.getElementById("boton").value = "Mostrar";
    }
    else{
      Ocultar();
      document.getElementById("boton").value = "Ocultar";
    }
}

Me guian mas o menos como podria cambiar el valor de la clase del id=”izquierda” e id=”derecha” segun use Mostrar() y Ocultar()? Muchas gracias

solución

Esto hice y funciono:

<script>
function Mostrar(){
  document.getElementById("fondo").style.display = "block";
  document.getElementById("divIzquierda").className = "col-md-2 col-sm-2 col-xs-12";
  document.getElementById("divDerecha").className = "col-md-10 col-sm-10 col-xs-12";
  document.getElementById("idIzquierdaCalendario").className = "col-md-2 col-sm-2 col-xs-12";
  document.getElementById("idDerechaCalendario").className = "col-md-10 col-sm-10 col-xs-12";
}
function Ocultar(){
  document.getElementById("fondo").style.display = "none";
  document.getElementById("divIzquierda").className = "col-md-0 col-sm-0 col-xs-12";
  document.getElementById("divDerecha").className = "col-md-12 col-sm-12 col-xs-12";
  document.getElementById("idIzquierdaCalendario").className = "col-md-0 col-sm-0 col-xs-12";
  document.getElementById("idDerechaCalendario").className = "col-md-12 col-sm-12 col-xs-12";
}
function Mostrar_Ocultar(){
    var fondo = document.getElementById("fondo");
    if(fondo.style.display == "none"){
      Mostrar();
      document.getElementById("boton").value = "Mostrar";
    }
    else{
      Ocultar();
      document.getElementById("boton").value = "Ocultar";
    }
}
</script>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *