Скрывание блока по нажатию

Скрыть / показать div по нажатию

Речь пойдет о скрытии и открывании блока div при нажатии на какой либо элемент. Если вы знаете, что при помощи javascript мы можем изменять CSS свойства объекта на странице, то это совсем не составит труда написать такой код. Для начала выложу сам код (чтобы было меньше воды):

#div < width:100px; height:100px; background-color:orange; >#link < cursor:pointer; >#link:hover

function hide_show() < //Получаем стиль блока с айди div (для изменения) var div=document.getElementById("div").style.display; //Получаем стиль ссылки (для изменения) var link=document.getElementById("link").innerHTML; //Изначально стиль display у блока равен "" //так как он изначально отображается //задаем ему стиль block if(div=="")div="block"; //Если блок не отображается if(div=="none") < div="block"; link="Скрыть"; >//или наоборот else < div="none"; link="Показать"; >//Теперь меняем стили у ссылки //и блока который хотим скрыть или показать document.getElementById("div").style.display=div; document.getElementById("link").innerHTML=link; >

Сначала придаем блоку div стили, а именно ширину 100 пикселей, высоту 100 пикселей, фоновый цвет — оранжевый. Дальше придаем стиль для ссылки: курсор по умолчанию «pointer» (пальчик), при наведении сделать ссылку жирной и красной. После CSS стилей вы найдете хорошо закомментированный код на javascript (это и есть функция скрытия/показа блока). Ну и в самом конце html каркас всего написанного. Делаем ссылку с id равным link и блок с id равным div . Дополнение: хотелось бы чтобы изначально положение div`a было скрытым, а после чего по нажатию кнопки открыть, он отображался на странице. Решение:

    #div < width:200px; height:200px; background:orange; display:none; >#link < cursor:pointer; background:silver; padding:5px; float:left; >#link:hover 
Показать
  

Код такой же, просто немного изменились события. Теперь изначально переменная div стоит со значением «none». И после этого, конечно же мы меняем надписи местами.

Источник

Кнопка для скрытия контента на JavaScript.

Давайте рассмотрим реализацию кнопки для скрытия части контента на HTML с использованием JavaScript. При нажатии на кнопку будет появляться скрытый контент. В записи представлены простые стили для большей гибкости, вы можете сами стилизовать элементы.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

Простая кнопка скрывающая часть контента

Для начала разберём простую реализацию, а ниже будем добавлять дополнения для усовершенствования скрипта.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

HTML

.container_for_tab — контейнер в котором находятся все внутренности таба,
.but_for_tab — кнопка для открытия,
.tab_content — блок со скрытым контентом,
.hidden_block — класс которому мы будим добавлять свойства display: none для скрытия блока,
.visible_block — класс которому мы будим добавлять свойства display: none для проявления блока.

 
Показать ещё
 
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
 

CSS

Здесь простые стили для кнопки и стили для элемента hidden_block и visible_block .

.but_for_tab < width: fit-content; margin: auto; display: flex; flex-direction: row; padding: 5px 20px; border: 1px solid #1e1e1e; border-radius: 10px; cursor: pointer; >.hidden_block < display: none; >.visible_block

JavaScript

Всю работу выполняет JavaScript функция представленная ниже. В качестве параметра вам нужно передать элементы участвующие в реализации.

function tab(but_tab, hidden_block_tab) < /*проверяем на событие нажатия на кнопку которыю вы передаёте в качестве параметра*/ but_tab.addEventListener("click", function() < /*если у блока с контентом есть класс "hidden_block"*/ if(hidden_block_tab.classList.contains('hidden_block')) < /*удаляем класс "hidden_block"*/ hidden_block_tab.classList.remove('hidden_block'); /*ставим класс "visible_block"*/ hidden_block_tab.classList.add('visible_block'); >/*если у блока с контентом есть класс "visible_block"*/ else if(hidden_block_tab.classList.contains('visible_block')) < hidden_block_tab.classList.remove('visible_block'); hidden_block_tab.classList.add('hidden_block'); >>); > /*находим элемент кнопку*/ var download_more = document.querySelector('.container_for_tab .but_for_tab'); /*находим элемент блока со скрытым контентом*/ var hidden_list = document.querySelector('.container_for_tab .tab_content'); /*запускаем функцию и передаём в неё параметры*/ tab(download_more, hidden_list);

Простая кнопка скрывающая часть контента + иконкой

Теперь давайте добавим иконку стрелочки вниз, которая после нажатия будет меняться на кнопку вверх.

Указав соответствующий класс вы можете указать свои иконки.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

HTML

Здесь из нового мы добавим только иконку через элемент с определенным классом и спец. классом для создания иконки.

 
 
Показать ещё
 
 
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
 

JavaScript

В JavaScript мы добавим код проверки на наличие иконки и добавим переменную в которую запишем элемент иконки.

function tab(but_tab, hidden_block_tab, icon_tab) < but_tab.addEventListener("click", function() < if(hidden_block_tab.classList.contains('hidden_block')) < hidden_block_tab.classList.remove('hidden_block'); hidden_block_tab.classList.add('visible_block'); /*добавим проверку на наличие иконки*/ if(icon_tab) < /*меняем класс иконки*/ icon_tab.classList.remove('fa-chevron-down'); icon_tab.classList.add('fa-chevron-up'); >> else if(hidden_block_tab.classList.contains('visible_block')) < hidden_block_tab.classList.remove('visible_block'); hidden_block_tab.classList.add('hidden_block'); if(icon_tab) < icon_tab.classList.remove('fa-chevron-up'); icon_tab.classList.add('fa-chevron-down'); >> >); > var download_more = document.querySelector('.container_for_tab2 .but_for_tab2'); var hidden_list = document.querySelector('.container_for_tab2 .tab_content2'); /*получим элемент иконки*/ var icon_more = document.querySelector('.container_for_tab2 .icon_more2'); tab(download_more, hidden_list, icon_more);

Простая кнопка скрывающая часть контента + меняющаяся надпись

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

HTML

Добавим новый элемент в который пропишем текст для кнопки. Текст кнопки «Показать ещё» будем менять на «Скрыть».

 
 
Показать ещё
 
 
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
 

JavaScript

function tab(but_tab, hidden_block_tab, icon_tab, text_block, before_text, after_text) < but_tab.addEventListener("click", function() < if(hidden_block_tab.classList.contains('hidden_block')) < hidden_block_tab.classList.remove('hidden_block'); hidden_block_tab.classList.add('visible_block'); if(icon_tab) < icon_tab.classList.remove('fa-chevron-down'); icon_tab.classList.add('fa-chevron-up'); >/*Делаем проверку на заполненность переменной*/ if(text_block) < /*Переписываем текст внутри элемента*/ text_block.innerHTML= after_text; >> else if(hidden_block_tab.classList.contains('visible_block')) < hidden_block_tab.classList.remove('visible_block'); hidden_block_tab.classList.add('hidden_block'); if(icon_tab) < icon_tab.classList.remove('fa-chevron-up'); icon_tab.classList.add('fa-chevron-down'); >if(text_block) < text_block.innerHTML= before_text; >> >); > var download_more = document.querySelector('.container_for_tab .but_for_tab'); var hidden_list = document.querySelector('.container_for_tab .tab_content'); var icon_more = document.querySelector('.container_for_tab .icon_more'); /*добавим переменную с элементом в котором нужно менять текст*/ var more_text = document.querySelector('.container_for_tab .text_more'); tab(download_more, hidden_list, icon_more, more_text, "Показать ещё", "Скрыть");

На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime

• Написание материала для курса по разработке ботов на Telegram
• Разработка универсального парсера на PHP

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Источник

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Как сделать кнопку «Закрыть» и скрыть элемент со страницы

В статье рассмотрены очень простое и удобное решения того, как добавить к элементу на сайте надпись «Закрыть» или кнопку-крестик, которая дает возможность посетителю скрыть со страницы ненужный элемент или закрыть определенный блок, просто кликнув по ней.
Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи CSS или используя jQuery. В зависимости от выбранного варианта, кнопку для каждого выбранного блока можно добавить вручную, через самостоятельное редактирование кода страницы, или программно — с помощью скрипта.

ПРИМЕР
Для обозначения кнопки я использовал вот такое изображение в виде крестика , с абсолютным позиционированием относительно основного блока. Общая HTML-конструкция примера выглядит так:

.pop-block <
display: inline-block;
position: relative; /* указывать обязательно */
width: 30%;
height: 300px; /* высота всего блока */
margin: 1%;
>
.close-block <
display: block;
position: absolute;
top: 8px;
right: -8px;
width: 16px;
height: 16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH/AAD/ra3/vr7///91+I/7AAAAQklEQVR42oXPwQoAIAgD0JXu/385FfTQgnYweKAp9pUXmE+swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd/X/tAVqqAopyUfkOAAAAAElFTkSuQmCC);
cursor: pointer;
>
.pop-block p <
width: 100%;
height: auto;
>

Вариант 1. Кнопка «Закрыть» только на CSS

Чтобы сделать исчезновение элемента по клику с помощью CSS, можно воспользоваться тегом формы . Для этого к основному коду блока потребуется добавить несколько новых тегов:

#pop-checkbox <
display: none;
>
#pop-checkbox:checked + .pop-block <
visibility: hidden; /*чтобы освободить занимаемое место — display: none;*/
>

Если на странице не один блок, который нужно скрыть, то при использовании этого варианта для каждого добавленного тега нужно указывать уникальный идентификатор и добавлять для него код CSS.

Вариант 2. Автоматическое добавление кнопки-крестика на jQuery

Использование JavaScript(jQuery) позволяет избавиться от внесения дополнительного HTML-кода в документ для каждого блока, который нужно скрыть, если он не один — это существенно:

В примере, вручную кнопка закрытия установлена только к первому элементу, к двум другим, кнопка добавляется автоматически, с помощью скрипта:

Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором.

Источник