Change class value with Javascript [duplicate]

Question

Change class value with Javascript [duplicate]

Navigation

#1 by (0 votes)

0

Good I have a button that hides a menu with javascript, this menu occupies two columns (bootstrap) and the more of the page are 10 columns.

<!-- 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>

What I need is to be able to change the value of the class by hiding or showing the menu:

When hiding (): Left: "col-md-0 col-sm-0 col-xs-12" Right: "col-md-12 col-sm-12 col-xs-12"

When Showing (): Left: "col-md-2 col-sm-2 col-xs-12" Right: "col-md-10 col-sm-10 col-xs-12"

With this hidden script or show the menu and I change the value to the button to say show or hide as appropriate:

<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";
    }
}

Do they guide me more or less how could I change the class value of id="left" and id="right" according to use Show () and Hide ()? Thank you very much

javascript bootstrap

asked by Juan 16.08.2017 в 15:49

source

1 answer

Problem with dependent clerks How can I use a DLL written in C

score 0 · Accepted Answer

This I did and it worked:

<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>