Для реализации открытия и закрытия блоков в HTML вы можете использовать элемент <details> и <summary>.
Элемент <details> создает раскрывающийся блок, и позволяет пользователю свернуть его или раскрыть содержимое. Этот элемент должен содержать элемент <summary>, который отображается в закрытом состоянии блока и позволяет пользователям открыть его.
Вот пример кода для создания блока с открытием и закрытием:
<details> <summary>Нажмите, чтобы открыть/закрыть блок</summary> <p>Содержимое блока, которое будет скрыто и отображено при открытии и закрытии блока.</p> </details>
Когда пользователь нажимает на элемент <summary>, блок раскрывается и отображает его содержимое. Когда пользователь снова нажимает на элемент <summary>, блок закрывается и его содержимое становится скрытым.
Элементы <details> и <summary> могут быть стилизованы с помощью CSS, чтобы изменить их внешний вид и добавить пользовательские стили.
Например, чтобы изменить стиль элемента <summary>, можно использовать следующий CSS-код:
summary {
cursor: pointer; /* Добавляем указатель при наведении */
font-weight: bold; /* Делаем текст жирным */
color: blue; /* Изменяем цвет текста на синий */
}
Таким образом, с помощью элементов <details> и <summary> вы можете легко создать блоки с открытием и закрытием в вашем HTML-коде.