Ocultar botones HTML y mostrarlos usando Onclick

1. Use la propiedad display de CSS para mostrar los botones ocultos en HTML
2. Use el método jQuery show() para mostrar los botones ocultos en HTML

Este tutorial presentará algunos métodos para ocultar los botones HTML y hacerlos visibles mediante el evento onclick.

Use la propiedad display de CSS para mostrar los botones ocultos en HTML

Podemos ocultar un botón HTML primero configurando su propiedad display en ninguno. Luego, podemos establecer la propiedad display en inline o block usando JavaScript.

La propiedad de visualización en línea o bloque mostrará los botones HTML ocultos. La diferencia entre display: inline y display: block es que el componente inline puede tener dos o más componentes en una línea o fila.

Pero los componentes de bloque solo pueden tener un componente en una línea o fila.

Por ejemplo, cree un botón y asígnele el nombre “Mostrar”. Establezca el atributo onclick del botón en makeChange().

La función makeChange() se llama con el clic del botón Mostrar. Luego crea los otros tres botones y llámalos Botón1, Botón2 y Botón3.

Configure el id de Botón1 como b1, Botón2 como b2 y Botón3 como b3. En CSS, seleccione los botones por su id y establezca la propiedad display en ninguno.

A continuación, en JavaScript, cree una función makeChange(). Dentro de esa función, establezca la propiedad de visualización de cada botón en bloquear.

Seleccione el botón específico por su id como document.getElementById("b1") para el primer botón. Luego, configure la pantalla asignando document.getElementById("b1")style.display a block.

Repítelo para los otros dos botones.

Código de ejemplo:

<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>

#b1, #b2, #b3 {
display: none;
}

function makeChange() {
  document.getElementById('b1').style.display = 'block';
  document.getElementById('b2').style.display = 'block';
  document.getElementById('b3').style.display = 'block';
}

Use el método jQuery show() para mostrar los botones ocultos en HTML

También podemos usar la función show() de jQuery para mostrar los elementos HTML ocultos. La función show() solo muestra los componentes HTML seleccionados cuya propiedad display está establecida en ninguno.

No funciona para elementos HTML cuya propiedad de visibilidad está establecida en ninguno. Usaremos el mismo método que el anterior para ocultar los botones.

También reutilizaremos la estructura HTML utilizada en el método anterior.

Después de establecer la propiedad display del botón en ninguno, cree una función makeChange() en JavaScript. Dentro de la función, selecciona los botones con su id y llama al método jQuery show() como $('#b1, #b2, #b3').show().

Cuando se hace clic en el botón Mostrar, se mostrarán los botones ocultos. Por lo tanto, podemos usar el método show() de jQuery para mostrar los botones ocultos en HTML.

Código de ejemplo:

<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>

#b1, #b2, #b3 {
    display: none;
}

function makeChange() {
  $('#b1, #b2, #b3').show();
}