Использование Javascript Я хочу кнопку, чтобы показать или скрыть div, изменив css

Question

Используя JavaScript, я хочу кнопку, чтобы показать или скрыть div, изменив CSS.

HTML:

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

CSS:

.bottomContainer { 
    display: block; 
} 

Я хочу использовать JavaScript, чтобы сделать следующее

[кнопка]

При нажатии кнопки Javascript меняет CSS для нижнего конвейера до

.bottomContainer { 
    display: none; 
} 

Возможно ли это?

Answer 1

Да, несколько способов. С ванильным JS вы сделаете что-то вроде:

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

Это всего лишь один из нескольких способов. Вы также можете сделать правило css для класса .hide, которое имеет правило display: none, или сделать это с помощью метода jQuery .hide() или любого количества средств на основе фреймворка.

Answer 2

Это будет работать, если вы хотите, чтобы кнопка скрывала контейнер и не переключала его видимость.

<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>