Как с помощью JavaScript скрыть изображения при нажатии кнопки "Подробнее"?

Question

Юхим

javascript

Как с помощью JavaScript скрыть изображения при нажатии кнопки "Подробнее"?

Как можно модифицировать код, чтобы при повторном нажатии на кнопку "Подробнее" все элементы, отображенные после предыдущего клика, скрывались обратно? Вот часть кода для отображения дополнительных элементов: [предоставлен код]. Как адаптировать этот код для решения новой задачи?

14 марта 2024 г. 10:29

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для скрытия изображений при нажатии кнопки "Подробнее" можно использовать следующий код:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Hide Images</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var button = document.getElementById("showMoreButton");
            var images = document.getElementsByClassName("image");

            button.addEventListener("click", function() {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
            });
        });
    </script>
</head>
<body>
    <button id="showMoreButton">Подробнее</button>
    <img src="image1.jpg" class="image">
    <img src="image2.jpg" class="image">
    <img src="image3.jpg" class="image">
</body>
</html>
```

Чтобы модифицировать код так, чтобы при повторном нажатии на кнопку "Подробнее" все скрытые изображения снова отображались, можно изменить код следующим образом:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Hide Images</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var button = document.getElementById("showMoreButton");
            var images = document.getElementsByClassName("image");
            var imagesHidden = false;

            button.addEventListener("click", function() {
                if (imagesHidden) {
                    for (var i = 0; i < images.length; i++) {
                        images[i].style.display = "block";
                    }
                    imagesHidden = false;
                } else {
                    for (var i = 0; i < images.length; i++) {
                        images[i].style.display = "none";
                    }
                    imagesHidden = true;
                }
            });
        });
    </script>
</head>
<body>
    <button id="showMoreButton">Подробнее</button>
    <img src="image1.jpg" class="image">
    <img src="image2.jpg" class="image">
    <img src="image3.jpg" class="image">
</body>
</html>
```

Теперь при каждом клике на кнопку "Подробнее" изображения будут либо скрываться, либо отображаться в зависимости от их текущего состояния.