Показать скрытую кнопку html

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

Источник

Скрытие элементов в Веб

От автора: в процессе веб-разработки нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном представлении и скрыта в настольном. Или элемент навигации, который скрыт на мобильном устройстве и отображается на настольном.

При скрытии элемента существует три разных состояния:

Элемент полностью скрыт и удален из потока документа.

Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.

Элемент видим, но скрыт только для программ чтения с экрана.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

В этой статье мы узнаем о скрытии элементов в HTML и CSS и рассмотрим аспекты доступности, анимацию и варианты использования для скрытия. Давайте начнем!

Атрибут HTML5 hidden

Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden, если это не было переопределено вручную из CSS. Это похоже на эффект применения к элементу display: none. Рассмотрим следующий пример.

У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px. Я добавил к элементу img атрибут hidden. В CSS я использовал атрибут hidden, чтобы отобразить элемент только в желаемом размере области просмотра.

Ну, вы можете быть удивлены, почему бы не использовать display: none? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden, мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.

Влияние hidden на доступность

С точки зрения доступности hidden полностью скрывает элемент с веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только визуально.

Свойство CSS Display

Каждый элемент имеет значение display по умолчанию, например, inline-block, block, table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none. Когда элемент скрыт через display: none, все его потомки будут удалены вместе с ним.

Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.

Это полностью скрывает изображение из потока документа и от программ чтения с экрана. Может быть, вам интересно, что такое поток документа? Смотрите рисунок ниже:

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

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

Загружаются ли ресурсы, если они были скрыты через CSS?

Короткий ответ — да. Например, если img скрыт с помощью CSS, и мы отображаем его на определенной контрольной точке, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.

В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, где показано, что изображение загружено.

Мы вернемся к этому позже, чтобы объяснить, как уменьшить количество HTTP-запросов, когда они не нужны на определенной контрольной точке или размере области просмотра.

Элемент style

Стоит отметить, что существуют элементы с display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить значение его свойства display на block, чтобы он был виден.

Источник