Для открытия блока под кнопкой, на которую был клик, можно использовать JavaScript события и методы для манипуляции с CSS стилями.
Сначала необходимо найти кнопку, на которую был сделан клик, и затем найти блок, который нужно открыть. Можно использовать методы для поиска элементов, такие как querySelector или getElementById. Давайте рассмотрим пример для обработки клика на кнопку и открытия связанного с ней блока:
<!DOCTYPE html>
<html>
<head>
<style>
.hidden-block {
display: none;
}
</style>
</head>
<body>
<button class="toggle-button">Открыть блок</button>
<div class="hidden-block">Содержание блока</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Находим кнопку и блок по классу
var button = document.querySelector('.toggle-button');
var block = document.querySelector('.hidden-block');
// Добавляем обработчик клика на кнопку
button.addEventListener('click', function() {
// Проверяем текущее состояние отображения блока
if (block.style.display === 'none') {
// Если блок скрыт, то открываем его, меняя значение display на 'block'
block.style.display = 'block';
} else {
// Если блок открыт, то скрываем его, меняя значение display на 'none'
block.style.display = 'none';
}
});
});
</script>
</body>
</html>
В этом примере при запуске скрипта кнопка и блок находятся по классу с использованием querySelector. Затем добавляется обработчик клика на кнопку, который изменяет значение свойства display блока на 'block', если он скрыт, или на 'none', если он уже открыт.
Стиль блока .hidden-block содержит изначально свойство display: none;, чтобы скрыть его при загрузке страницы. Таким образом, каждый раз, когда на кнопку будет сделан клик, блок будет открываться или закрываться, в зависимости от текущего состояния.