How to hide a button after onclick event with JavaScript?

Question

I am trying to hide a button after onclick event with JavaScript. My button is located at the top of the page so when someone clicks on it, content is showed but the button still on the page. I was thinking if I could hide it after the user click on the button.

Do you have any hint on how to do it?

Here is the code that I am using:

function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
 }

#menuDiv{
        display: none; 
}

<div class="text-center">

        <button onclick="showDiv()" class="btn btn-light"><img src="images/cartoon-cookie.png" alt="Cookie"
                style="height:100px;">Yes, I want to see the menu</button>
    </div>

    <div id="menuDiv">
    <!-- here is the content that is revealed after the on click event -->
    </div>

Does this answer your question? [Hide submit button using Javascript](https://stackoverflow.com/questions/6054081/hide-submit-button-using-javascript) — Manjuboyz, Jul 03 '20 at 17:17
Does this answer your question? [Use jQuery to hide a DIV when the user clicks outside of it](https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Hasan Elsherbiny, Jul 04 '20 at 03:23
Does this answer your question? [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Burkely91, Jul 04 '20 at 09:13

score 1 · Answer 1 · answered Jul 03 '20 at 17:22

function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
 }

#menuDiv{
        display: none; 
}

<div class="text-center">

        <button id = "myBtn" onclick="showDiv()" class="btn btn-light"><img src="images/cartoon-cookie.png" alt="Cookie"
                style="height:100px;">Yes, I want to see the menu</button>
    </div>

    <div id="menuDiv">
    <!-- here is the content that is revealed after the on click event -->
    </div>

In the above code, you need to add

document.getElementById('myBtn').style.display = "none";

in showDiv function below document.getElementById('menuDiv').style.display = "block";

It hides the button by applying display: none property to myBtn element

You can also use class or tag name to fetch the element(s) and apply the property

score 0 · Accepted Answer · answered Jul 03 '20 at 17:16

function showDiv() {
    document.getElementById('menuDiv').style.display = "block";
    document.getElementById('btn').style.display = "none";
 }

#menuDiv{
        display: none; 
}

<div class="text-center">

        <button id='btn' onclick="showDiv()" class="btn btn-light"><img src="images/cartoon-cookie.png" alt="Cookie"
                style="height:100px;">Yes, I want to see the menu</button>
    </div>

    <div id="menuDiv">
    <!-- here is the content that is revealed after the on click event -->
    </div>

You have to use this for hiding button

document.getElementById('btn').style.display = "none";

Oh that's perfect!! thank you so much!! I didn't see that was easy to add an id an hide the button :) — Ma. Florencia Fernández Caruso, Jul 03 '20 at 17:19

score -1 · Answer 3 · answered Jul 03 '20 at 17:15

-1

You can hide the button using the the style property visibility and set it to hidden. Alternatively you can remove the button from the DOM, if hiding does not suffice.

answered Jul 03 '20 at 17:15

genius42

243
1
6

How to hide a button after onclick event with JavaScript?

3 Answers3