<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

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

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Меню аккордеон на JS

Меню аккордеон на JS

Сегодня мы создадим на чистом JS коде – меню аккордеон с тремя секциями, при клике на которые, будет открываться панель с текстом, а при втором клике обратно закрываться.

Меню аккордеон обычно используют для блока часто задаваемых вопросов.

Демонстрация меню аккордеон.

HTML структура

Создадим 3 кнопки с классом accordion, ниже которых поместим дивы с классом panel. Внутри блоков, будут параграфы с текстом.

<button class="accordion">Вопрос 1</button>
<div class="panel">
  <p>Ответ на Вопрос 1...</p>
</div>
<button class="accordion">Вопрос 2</button>
<div class="panel">
  <p>Ответ на Вопрос 2...</p>
</div>
<button class="accordion">Вопрос 3</button>
<div class="panel">
  <p>Ответ на Вопрос 3 ...</p>
</div>

Картинка пока невзрачная, добавим стилей и спрячем секции с текстом.

Меню аккордеон на JS.

CSS код

Стилизация кнопок, которые используются для открытия и закрытия панели аккордеона.

.accordion {
  background-color: #cfd8dc;
  color: #fff;
   … }

При наведении курсора на кнопку и при клике по ней, будет меняться цвет фона. Для смены цвета при клике, мы повесим на функцию в JS класс active.

.active, .accordion:hover {
  background-color: #607d8b;
}

Стилизация блоков с текстом (ответы на вопросы). По умолчанию эти блоки спрятаны за счет нулевого свойства максимальной высоты.

.panel {
  ..
  max-height: 0;
  overflow: hidden;
  .. }

JS код

Объявим две переменные, первая переменная будет получать элемент по названию класса accordion. Вторая переменная с названием i.

var acc = document.getElementsByClassName("accordion");
var i;

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

for (i = 0; i < acc.length; i++) {

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

acc[i].addEventListener("click", function() {

Метод toggle добавляет и удаляет класс active для замены цвета кнопки, управляющей панелью.

this.classList.toggle("active");

Назначаем переменной с названием panel – свойство nextElementSibling, это переключатель между скрытием и показом активной панели.

var panel = this.nextElementSibling;

Для раскрытия, спрятанных блоков с текстом (эффект аккордеона), надо менять максимальную высоту, в зависимости от высоты панели на разных размерах экрана. Сначала делаем проверку, если значение максимальной высоты в стилях для блока с классом panel, равно нулю, то новая максимальная высота станет больше на энное количество пикселей, в зависимости от размера экрана у пользователя.

if (panel.style.maxHeight){
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
  });
}

Добавление иконок

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

Это подходящий случай для применения псевдокласса after. Код для content, можно найти в таблице символов Юникода.

.accordion:after {
  content: '\002B'; /* Код Юникода для символа "плюс" (+) */
  color: #fff;
  font-size: 18px;
  float: right;
  margin-left: 4px;
}


.active:after {
  content: "\2212"; /* Код Юникода для символа "минус" (-) */
}

Меню аккордеон надо использовать на сайтах, в целях экономии места и удобства получения информации.

На CodePen вы можете увидеть весь код меню аккордеон на чистом JS, который можно скачать и использовать в своих проектах.

See the Pen Menu accordion pure JS by porsake (@porsake) on CodePen.

Хотите научиться создавать на чистом JS больше интерактивных компонентов? Вам поможет замечательный видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.