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

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

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

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

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);

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

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

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

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);

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

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, "Показать ещё", "Скрыть");