0

Using JavaScript, I want a button to show or hide a div by changing the CSS.

HTML:

<div id="bottomContainer">
    <div id="count" class="count">...</div>
    <div id="visualizations>...</div>
</div>

CSS:

.bottomContainer {
    display: block;
}

I want to use javascript to do the following

[button]

When button is clicked Javascript changes the CSS for bottomContainer to the following

.bottomContainer {
     display: none;
}

Is this possible?

Steve Gomez
  • 8,746
  • 7
  • 37
  • 44
MercPls
  • 108
  • 7

2 Answers2

0

Yes, a number of ways. With vanilla JS, you would do something like:

document.getElementById('myButtonId').addEventListener('click', function () {
    document.getElementById('bottomContainer').style.display = "none";
}

This is just one of a few ways. You could also make a css rule for a .hide class that has the display: none rule, or do this with jQuery's .hide() method, or any number of framework-based means.

Alexander Nied
  • 11,309
  • 4
  • 26
  • 41
0

This will work if you only want the button to hide the container and not toggle its visibility.

<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>
Jon Diamond
  • 170
  • 1
  • 1
  • 10
  • This worked, I should mention that after using this I wanted to control multiple Div's with one button so I did the following – MercPls Oct 14 '16 at 18:48
  • Click me – MercPls Oct 14 '16 at 18:49
  • The javascript I used was – MercPls Oct 14 '16 at 18:51