Как реализовать раскрытие div при клике?

Как создать div с пятью ссылками, который изначально отображается в виде "Показать ссылки", и при клике на него раскрывается, показывая пять ссылок, а при следующем клике сворачивается обратно в исходное положение?
  • 17 сентября 2023 г. 14:07
Ответы на вопрос 2
Вы можете реализовать раскрытие div при клике, используя JavaScript и CSS. Вот пример кода:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #links {
            display: none; /* Изначально скрываем div */
        }
    </style>
</head>
<body>
    <div id="showLinks">Показать ссылки</div>
    <div id="links">
        <a href="#">Ссылка 1</a><br>
        <a href="#">Ссылка 2</a><br>
        <a href="#">Ссылка 3</a><br>
        <a href="#">Ссылка 4</a><br>
        <a href="#">Ссылка 5</a><br>
    </div>

    <script>
        var showLinksButton = document.getElementById("showLinks");
        var linksDiv = document.getElementById("links");

        showLinksButton.addEventListener("click", function() {
            if (linksDiv.style.display === "none") {
                // Если div скрыт, показываем его
                linksDiv.style.display = "block";
                showLinksButton.innerHTML = "Скрыть ссылки";
            } else {
                // Если div отображается, скрываем его
                linksDiv.style.display = "none";
                showLinksButton.innerHTML = "Показать ссылки";
            }
        });
    </script>
</body>
</html>
```

В этом примере мы используем CSS свойство `display: none;` для скрытия div с ссылками по умолчанию. Затем мы добавляем слушатель событий к div с надписью "Показать ссылки", который при клике изменяет значение свойства `display` div'а с ссылками и текст кнопки. Если div скрыт, он становится видимым и текст кнопки меняется на "Скрыть ссылки". Если div отображается, он скрывается снова, и текст кнопки возвращается к "Показать ссылки".
способов находить спойлеры - использовать поисковик, например, Google. Просто введите в поисковой строке свой запрос и добавьте ключевое слово "спойлеры".
Похожие вопросы