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
  • 11,596
  • 7
  • 39
  • 53
MercPls
  • 128
  • 8

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
  • 12,804
  • 4
  • 25
  • 45
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
  • 200
  • 1
  • 2
  • 11
  • 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