Html скрыть блок по кнопке

Html скрыть блок по кнопке

1). Нам потребуется блок, в котором будет сидеть весь контент, и который будет плавно задвигаться-выдивгаться:

Script код выдвижного блока:

click_iks = document.querySelector (‘#iks’);

theid = document.querySelector (‘#theid’);

На нажатие(onclick) по крестику повесим функцию:

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

Проверяем содержит ли(contains) класс(classList) под именем hide в переменной theid:

Если да(блок задвинут), то hide удаляем, show добавляем:

theid . classList . remove(‘hide’);

theid . classList . add(‘show’ );

Если нет(блок выдвинут),то задвигаем панель.

theid . classList . add(‘hide’);

theid . classList . remove(‘show’);

click_iks = document.querySelector (‘#iks’);

theid = document.querySelector (‘#theid’);

click_iks . onclick = function( )

if ( theid . classList . contains(‘hide’) )

theid . classList . remove(‘hide’);

theid . classList . add(‘show’ );

theid . classList . add(‘hide’);

theid . classList . remove(‘show’);

Результат :плавное появление блока на странице при клике JavaScript

Альтернативный скрипт — Плавное появление и исчезание блока при нажатии JavaScript

Чем данный вариант пример №2 отличается от выше идущего пункта!?
1). Эти две строки не нужны, удалим их:
click_iks = document.querySelector (‘#iks’);
theid = document.querySelector (‘#theid’); 2). Заменим click_iks на название ид theid — так тоже будет работать! Только теперь блок может плавно выезжать и скрываться не только точно нажимая по крестику, но и в том месте, где невидимо развернут блок с id+theid :

if ( theid . classList . contains(‘hide’) )

theid . classList . remove(‘hide’);

theid . classList . add(‘show’ );

theid . classList . add(‘hide’);

theid . classList . remove(‘show’);

Все остальное копия первого варианта.

Плавное появление блока css при клике jquery

Чем отличается данный вариант плавного появления блока css при клике jquery — этот вариант скрипт написан на jquery. Естественно,что вы должны подключить jquery, нам понадобится:

Мы как-то разбирали несколько вариантов появление и исчезновение блока при перезагрузке страницы теория, живой пример, а эта тема основана на css той страницы, только с той разницей, что здесь мы данный код css, который отвечает за появление и исчезновения блока — будем присваивать этому блоку, после чего css должен сработать!
Единственное, что добавим… ещё нам потребуется движение влево

здесь вы можете расположить все,что угодно.

Источник

Показать и скрыть элемент на JS

На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.

HTML структура

В HTML разметке присутствует кнопка, имеющая начальное положение «Показать элемент» и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.

Показать элемент

CSS код

Разукрасим нашу кнопку линейным градиентом и установим легкую тень.

.btn text-decoration: none;
text-align: center;
width: 250px;
padding: 20px 0;
border: solid 1px #004F72;
border-radius: 4px;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
outline: none;
>

.content margin-top: 20px;
padding: 20px;
border: solid 1px rgb(214, 218, 219);
border-radius: 4px;
font-family: Calibri, ‘Trebuchet MS’, sans-serif;
>

.hidden display: none; // скрывает текст
>

JavaScript код

По событию клика по кнопке, у текстового блока должен удалиться класс hidden и тогда блок перестанет быть скрытым. Повторный же клик по кнопке наоборот вешает класс hidden на контентный блок, тем самым скрывая его. Как видите, весь механизм завязан на классе hidden.

Создадим две переменные, которым присвоим кнопку и блок по названиям селекторов. Затем будем отлавливаем событие клика по кнопке с помощью обработчика событий addEventListener. Первым параметром мы передаем событие клика, а вторым параметром название функции btnClick, в которой описываем действия, которые должны произойти после клика по кнопке. Первым делом необходимо найти класс hidden и при помощи метода toggle (переключатель) добавлять класс hidden, если его нет и удалять, если он есть. Кроме того на кнопке должны меняться надписи «Показать элемент / Скрыть элемент». Для этого обратимся к свойству кнопки textContent и создадим условие if-else. Если в блоке с классом content содержится и класс hidden, то поменять на кнопке надпись на «Скрыть элемент». В противном случае оставить, как было «Показать элемент».

const btn = document.querySelector(«.btn»);
const content = document.querySelector(«.content»);

function btnClick() console.log(content.classList);

if (content.classList.contains(«hidden»)) btn.textContent = «Скрыть элемент»;
> else btn.textContent = «Показать элемент»;
>

Демонстрация показа и скрытия элемента

Создано 17.04.2020 10:32:13

Источник

Кнопка для скрытия контента на 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

Источник