Hide a div onclick through javascript

Question

I have done for showing a div on click i want to remove on another click. I want the div to be removed on another click.

Here is the HTML code

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Javascript

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList — epascarello, May 18 '17 at 13:09
Possible duplicate of [How to Toggle a div's visibility by using a button click](http://stackoverflow.com/questions/19074171/how-to-toggle-a-divs-visibility-by-using-a-button-click) — George, May 18 '17 at 13:11

Avitus · Accepted Answer · 2017-05-18T13:28:45.943

0

You have to check the visibility of the div and do a toggle based on that.

 function showDiv() {
    if( document.getElementById('welcomeDiv').style.display == "none") {
       document.getElementById('welcomeDiv').style.display = "block";
    }
    else {
       document.getElementById('welcomeDiv').style.display = "none"
    }
}

edited May 18 '17 at 13:28

answered May 18 '17 at 13:10

Avitus

15,640
6
43
53

Christoph · Answer 2 · 2017-05-18T13:25:17.093

Get rid of the inline styling and use a class to toggle the display type. This is cleaner and you can easily reuse it for other elements.

function showDiv(element) {
  document.querySelector(element).classList.toggle("invisible");
}

.invisible {
  display: none;
}

<div id="welcomeDiv" class="answer_list invisible"> WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('#welcomeDiv')" />

score 0 · Answer 3 · answered May 18 '17 at 13:12

function showDiv() {
  var element = document.getElementById('welcomeDiv');
    if(!element.classList.contains('show')){
    element.classList.add('show');
    } else {
    element.classList.remove('show');
    }
       
       
 }

.show {
   display: block !important;
}

<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

score 0 · Answer 4 · answered May 18 '17 at 13:56

Check for the current visibility of the DIV and let the javascript function do accordingly.

function showDiv() {
    if( document.getElementById('welcomeDiv').style.display == "none") {
       //If it is not visible, make it visible
       document.getElementById('welcomeDiv').style.display = "block";
    }
    else {
       //Else, make it invisible.
       document.getElementById('welcomeDiv').style.display = "none"
    }
}

Hide a div onclick through javascript

4 Answers4