jQuery

Ocultar y mostrar un botón con Java Script y jQuery

Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de ser necesario.

Para hacer esto es muy importante tener la librería de jQuery incluida en el código HTML, como lo mostraremos más adelante.

Cómo ocultar y mostrar un botón HTML con Java Script y jQuery

El código que publicaré a continuación lo que hace es ocultar o mostrar el botón con id “acción” con solamente presionar otros dos botones.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar botón acción</button>
    <button type="button" id="hide">Ocultar botón acción</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').show();
        });
        $('#hide').click(function(){
	      $('#button').hide();
        });
      })
    </script>
  </body>
</html>

Ahora si se quiere simplificar la funcionalidad, se puede utilizar la función toggle de jQuery, que detecta automáticamente si el botón está oculto o no. En caso de estar oculto lo muestra y lo mismo en caso contrario.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar/Ocultar</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').toggle();
        });
      })
    </script>
  </body>
</html>

Bueno gente, eso es todo por esta vez. La idea es que al finalizar el mini tutorial puedan ser capaces de oculta y mostrar etiquetas HTML con Java Script y jQuery. Ante cualquier inconveniente no duden en dejar un comentario.

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *