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

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

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 {
    display: 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

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

<div class="container_for_tab container_for_tab2">
  <div class="but_for_tab but_for_tab2">
    <div>Показать ещё</div>
    <i class="icon_more icon_more2 fa fa-chevron-down"></i>
  </div>
  <div class="hidden_block tab_content tab_content2">
  	Lorem Ipsum - это текст-"рыба", часто используемый 
    в печати и вэб-дизайне. Lorem Ipsum является стандартной 
    "рыбой" для текстов на латинице с начала XVI века. 
    В то время некий безымянный печатник создал большую 
    коллекцию размеров и форм шрифтов, используя Lorem 
    Ipsum для распечатки образцов. Lorem Ipsum не только 
    успешно пережил без заметных изменений пять веков, 
    но и перешагнул в электронный дизайн.
  </div>
</div>

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

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

<div class="container_for_tab">
  <div class="but_for_tab">
    <div class="text_more">Показать ещё</div>
    <i class="icon_more fa fa-chevron-down"></i>
  </div>
  <div class="hidden_block tab_content">
  	Lorem Ipsum - это текст-"рыба", часто используемый 
    в печати и вэб-дизайне. Lorem Ipsum является стандартной 
    "рыбой" для текстов на латинице с начала XVI века. 
    В то время некий безымянный печатник создал большую 
    коллекцию размеров и форм шрифтов, используя Lorem 
    Ipsum для распечатки образцов. Lorem Ipsum не только 
    успешно пережил без заметных изменений пять веков, 
    но и перешагнул в электронный дизайн.
  </div>
</div>

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, "Показать ещё", "Скрыть");
0 0 голос
Рейтинг статьи
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии