JIYIK CN >

This article will show you several ways to hide HTML buttons and make them visible using the onclick event.

Using the CSS display property to show hidden buttons in HTML

We can first hide the HTML button by setting its display property to none. We can then use JavaScript to set the display property to inline or blocked.

Displaying the property inline or block will display a hidden HTML button. The difference between the inline component display:inlineand display:blockthe block component is that the inline component can have two or more components in one row or line.

But a block component can have only one component in a row or line.

For example, create a button and name it Show. Set the button's onclick property to makeChange().

Click the Show button to call makeChange()the function. Then create three more buttons and name them Button1, Button2, and Button3.

Set the id of Button1 to b1, the id of Button2 to b2, and the id of Button3 to b3. In CSS, select the button by its id and set the display property to none.

Next, in JavaScript, create a function makeChange(). Inside the function, set the display property of each button to block.

Select a specific button as the first button by its id document.getElementById("b1"). Then, document.getElementById("b1")style.displayset the display by assigning to the block.

Repeat this for the other two buttons.

Sample code:

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

Show hidden button in HTML using jQuery show() method

We can also use jQuery show()function to show hidden HTML elements. show()The function only shows the selected HTML components whose display attribute is set to none.

It does not work on HTML elements with the visibility attribute set to none. We will use the same method as above to hide the button.

We will also reuse the HTML structure used in the above method.

After setting the button's display property to none, create a function in JavaScript makeChange(). Inside the function, select the button with ID and call the jQuery show()method $('#b1, #b2, #b3').show().

When the show button is clicked, the hidden button will be displayed. So, we can use jQuery show()method to show hidden button in HTML.

Sample code:

<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();
}