TUTORIAL JAVASCRIPT

    20 .- Mostrar y Ocultar

    Vamos a ver como mostrar y ocultar porciones enteras de HTML utilizando
    JavaScript.Dado que podemos modificar cualquier propiedad de CSS,
    tambien podemos modificar las propiedades que son útiles para la ocultación
    de elementos.Una es "visibility" y otra es "display" .Vamos a crear un div:
    <div id="contenedor"></div> , y a definirle propiedades CSS:
    <style type="text/css">
    #contenedor{

         width:200px;
      height:200px;
      background-color:beige;

         }
  </style>

    La idea es como mostrar u ocultar el div según que condición,por ejemplo
    con un botón que tenga como valor Apagar,y en el que vamos a capturar
    el evento onClick con una función que llamamos:
    <input type="button" value="Apagar" onClick="apagar()" />
    Y la función lo que va a hacer es buscar el objeto DOM del div mediante una
    variable y después para ocultarlo cambiaremos el estilo CSS "visibility",que
    acepta únicamente dos valores de texto,o "visible" o "hidden" (oculto) :
    <script type="text/javascript">
      function apagar(){;
      var contenedor = document.getElementById("contenedor");
      contenedor.style.visibility = "hidden";
      }
    </script>
    Si tambien queremos que aparezca de nuevo,creamos otro botón y definimos
    otra función con el nombre encender(),pero en vez de indicar "hidden" para
    ocultarlo,indicaremos "visible" para que se visualice:

Entra y pulsa en los botones para ocultar y mostrar la caja.

    Ahora en vez de cambiar "visibility",cambiaremos "display" :
    contenedor.style.display = "none"; para ocultarlo asignamos
    el valor "none" ,y para hacerlo visible el valor "block" .La diferencia es que con
    "display",la caja no sigue ocupando su espacio en el documento al ocultarla.

Entra y pulsa en los botones para ocultar y mostrar la caja.

    Sin embargo estamos utilizando dos botones,uno para cada acción,y lo que
    queremos es tener un solo botón que sea inteligente,es decir,cuando esté
    visible que lo oculte y si está oculto que lo muestre.
    De momento creamos otro boton que llamará a otra función.
    <input type="button" value="Apagar" onClick="apagarEncender()" />
    Lo primero que debe saber la función es en que estado está,por lo que
    obtenemos el objeto DOM del contenedor,y hacemos una bifurcación del
    código preguntando si el contenedor es igual a "block",si es "block" significa
    que se está mostrando,entonces lo apagamos.Pero lo indicamos con la misma
    función apagar() ,y esto es lo que se conoce como reutilización del código,si
    ya tenemos una función para algo,podemos reutilizarla cuando necesitemos.
    Fijate que estamos llamando a una función dentro de otra función.
    Y si está apagado llamamos a encender() :
    <script type="text/javascript">
      function apagarEncender(){;
      var contenedor = document.getElementById("contenedor");
       if(contenedor.style.display == "block"){
        apagar();
       }else{encender();}
      }
    </script>
    Si probamos vemos que al pulsar este nuevo botón,la primera vez no funciona,
    y esto pasa porque en la condición if ,está inicialmente como "block",luego
    tenemos que añadir esta propiedad en el CSS para que lo tome como tal.
    Tambien incluiremos en la condición,que el div esté vacío :
    if(contenedor.style.display == "block" || contenedor.style.display == "")
    Además queremos conseguir que este botón cambie el texto según en el
    estado en que esté,y eso lo conseguiremos accediendo al atributo "value"
    del botón.Por lo que ponemos un identificador a la etiqueta <input> ,(otra
    opción sería pasar this por parámetro en la función: apagarEncender(this).)
    <input id="boton" type="button" value="Apagar" onClick="apagarEncender()" />
    y recibimos el objeto DOM del botón e indicar las opciones en la función:
    function apagarEncender(){;
      var contenedor = document.getElementById("contenedor");
      var boton = document.getElementById("boton");
      if(contenedor.style.display == "block" || contenedor.style.display == ""){
        apagar();
        boton.value = "Encender";
       }else{
      encender();
      boton.value = "Apagar";
      }

      }
    Ahora además de ocultar o visualizar el div,tambien cambia el texto del botón.

Entra y pulsa en el botón para ocultar y mostrar la caja.

    Para darle funcionalidad de otra manera,vamos a colocar un "checkbox" y le
    vamos a capturar el evento onChange ,que llamará también a apagarEncender().
    Lo iniciaremos marcado con el atributo checked="checked"y pondremos un
    texto.Con esto lograremos que también se oculte el div:
    <input id="checkboxEncender" type="checkbox" onChange="apagarEncender()"
     checked="checked" /> Contenedor visible<br />
    Por último recibimos el objeto DOM,para indicarle en la condición que esté
    marcado o no,al mostrar u ocultar el div:
    var checkboxEncender = document.getElementById("checkboxEncender");
    if(contenedor.style.display == "block" || contenedor.style.display == ""){
        apagar();
        boton.value = "Encender";
        checkboxEncender.checked = "";
       }else{
      encender();
      boton.value = "Apagar";
      checkboxEncender.checked = "checked";
      }

    De esta manera si está oculto el div no estará marcado el checkbox.

Entra y pulsa en el botón o marca el checkbox para ocultar y mostrar la caja.