• Страница 1 из 1
  • 1
Скрыть и показать блок div по клику на JS
Kosten
Вторник, 15 Января 2019, 03:43 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Иногда на сайте нам нужно закрыть блок 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
Вторник, 15 Января 2019, 03:49 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Еще один способ, который реализован на 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
Вторник, 15 Января 2019, 04:08 | Сообщение 3
Оффлайн
Проверенные
Сообщений:588
Награды: 14
Зачем столько кода для скрытия блока?
достаточно прописать для кнопки вот такую строчку

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


При повторном нажатие на кнопку блок откроется
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: