• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Скрыть и показать блок div по клику на JS (При клике открыть DIV блок и аналогично закрыть)
Скрыть и показать блок div по клику на JS
Kosten
Дата: Вторник, 2019-01-15, 03:43 | Сообщение 1
Администраторы
Сообщений:22308
Награды: 56


Иногда на сайте нам нужно закрыть блок div, но при этом оставить функцию, чтоб можно было в аналогичном порядке его открыть. Это можно сделать при помощи скрипта, где вы ставите описание или то что нужно по умолчанию скрыть. Вообщем при открытие страницы будет написано "Показать блок" где делаем клик по этому описание и открывается скрытая информация. Но уже и название меняется, то есть при открытие видим такую надпись "Спрятать блок", где следующем кликом закрываем.



Ставим там, где хотите видеть, что надпись можно в самом скрипте сменить на свою оригинальную.

Код
<a id="kavensagukod" href="javascript:void(0);" onclick="viewdiv('mydiv');" data-text-show="Скрыть материал" data-text-hide="Показать материал">Показать материал</a>
<div id="mydiv" style="display:none;">Здесь ставим описание или элементы - который скрываем</div>

<script>
    function viewdiv(id) {
        var el = document.getElementById(id);
        var link = document.getElementById('kavensagukod');
        if (el.style.display == "block") {
            el.style.display = "none";
            link.innerText = link.getAttribute('data-text-hide');
        } else {
            el.style.display = "block";
            link.innerText = link.getAttribute('data-text-show');
        }
    }

</script>

Также можете посмотреть как получилось.

Демонстрация
Прикрепления: 5974383.jpg(33.7 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2019-01-15, 03:49 | Сообщение 2
Администраторы
Сообщений:22308
Награды: 56


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

Код
<script type="text/javascript">
<!--
function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}
//-->
</script>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');">Показать блок</a>
<div id="mydiv" style="display:none;">Как скрывать блок div в зависимости от разрешения экрана?</div>


Демонстрация
Страна: (RU)
waak
Дата: Вторник, 2019-01-15, 04:08 | Сообщение 3
Vip
Сообщений:540
Награды: 14


Зачем столько кода для скрытия блока?
достаточно прописать для кнопки вот такую строчку

Код
onclick="$('ТУТ КЛАС ИЛИ ID БЛОКА КОТОРЫЙ НУЖНО СКРЫТЬ').slideToggle('slow');"


При повторном нажатие на кнопку блок откроется
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Скрыть и показать блок div по клику на JS (При клике открыть DIV блок и аналогично закрыть)
  • Страница 1 из 1
  • 1
Поиск: