Как сделать javascript аккордеон

Содержание

Меню аккордеон на JS
Демонстрация меню аккордеон.
HTML структура
CSS код
JS код
Добавление иконок
Комментарии ( 0 ):
Как сделать — Складывающийся/Аккордеонный контент (Меню-аккордеон)
Аккордеон
Аккордеон, faq, спойлер и другие раскрывающиеся виджеты
Аккордеон на чистом JS
Найдены дубликаты
Менторство, новый набор

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

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

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

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

HTML структура

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

Ответ на Вопрос 1.

Ответ на Вопрос 2.

Ответ на Вопрос 3 .

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

CSS код

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

.accordion <
background-color: #cfd8dc;
color: #fff;
… >

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

.active, .accordion:hover <
background-color: #607d8b;
>

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

JS код

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

var acc = document.getElementsByClassName(«accordion»);
var i;

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

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

Метод 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, который можно скачать и использовать в своих проектах.

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

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

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

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

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

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

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

Она выглядит вот так:

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

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

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

Источник

Как сделать — Складывающийся/Аккордеонный контент (Меню-аккордеон)

Узнайте, как создать меню-аккордеон (складывающийся контент).

Аккордеон

Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого количества контента:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Источник

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
Будет доступно управление элементами с клавиатуры и других устройств.
Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
Работает при выключенном javascript.

Минус:

Старые браузеры не знают таких тегов и не будут скрывать информацию.

HTML:

С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.

К сожалению, у дефолтного маркера есть два недостатка:

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

По этой причине, дефолтный маркер надо спрятать и создать свой.

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

Svg маркер + анимация поворота:

Summary:before пришлось серьезно переделать:

Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
Картинку вешаем при помощи background.

Так же нужно у summary поставить отступ padding-left: 1.5em, чтоб текст и иконка не накладывались друг на друга.

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Svg маркер справа + эффект зеркального поворота стрелки:

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

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

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Источник

Аккордеон на чистом JS

Давайте разберемся как сделать аккордеон на ванильном JavaScript.

В принципе, можно, но аккордеон — это хороший пример списка из терминов и определений, для чего эти теги и предназначены.

Разберем по частям:

В dt помещаем вопрос, но для чего оборачивать его в кнопку? Опять семантика: когда пользователь кликает на элемент — что-то должно произойти, для этого необходимо использовать button.

Вторая причина — доступность через клавиатуру: на аккордеон можно попасть через tab и раскрыть через пробел.

В dd кладем ответ, обернутый в дополнительный div?

Дело в том, что для того чтобы анимировать «раскрытие» аккордеона, необходимо знать высоту ответа.

В неактивном состоянии тег answer имеет нулевую высоту, поэтому мы помещаем в него дополнительный div, размер которого мы и будем измерять.

Как только аккордеон будет раскрыт — мы присвоим answer ранее измеренную высоту.

Найдем все аккордеоны на странице и инициализируем их:

const elements = [. document.querySelectorAll(‘.js-accordion’)];
elements.forEach(accordion);

function accordion(element) <
// объект, в котором будем хранить всю необходимую информацию
const instance = <>;
function init() <
// найдем вопрос и ответ
findElements(instance, element);
// измерим высоту ответа
measureHeight(instance);
// добавим логику нажатия на кнопку
subscribe(instance);
>
init();
>

function findElements(object, element) <
const instance = object;
// element — это «вопрос», по которому происходит нажатие
instance.element = element;
// target — это «ответ», который должен «раскрываться»
instance.target = element.nextElementSibling;
>

function measureHeight(object) <
const instance = object;
// вычисляем высоту ответа
instance.height = object.target.firstElementChild.clientHeight;
>

У answer высота — 0, а у answer__content — нет

function subscribe(instance) <
instance.element.addEventListener(‘click’, (event) => <
// отменяем «действие по умолчанию»
event.preventDefault();
// меняем состояние аккордеона
changeElementStatus(instance);
>);
// если размер окна поменяется — измерим высоту ответа заново
window.addEventListener(‘resize’, () => measureHeight(instance));
>

function changeElementStatus(instance) <
if (instance.isActive) <
hideElement(instance);
> else <
showElement(instance);
>
>

hideElement и showElement

function hideElement(object) <
const instance = object;
const < target >= instance;
// обнуляем высоту ответа
target.style.height = null;
// делаем статус неактивным
instance.isActive = false;
>
function showElement(object) <
const instance = object;
const < target, height >= instance;
// задаем ответу сохраненную в measureHeight высоту
target.style.height = `$px`;
// делаем статус активным
instance.isActive = true;
>

Как всегда — демо на codepen.

Найдены дубликаты

Посмотрел твои посты. Ты решил посвятить жизнь созданию аккордеонов? Учти, за это тебя не будут любить, гораздо более вероятно, — будут ненавидеть, как и остальных говновебмастеров, замедляющих браузеры бесполезной хуитой.

Ок. У тебя девушка есть?

А есть предложения?

Есть, предлагаю написать приложение, типа тиндер, бесплатное для программистов и с платными функциями для девушек. Девушки будут иметь возможность выбрать себе перспективного обеспеченного парня, а у программистов облегчится бремя поиска девушек. Программисты для доступа к приложению проходят тест на настоящего программиста, чтобы всякие эникеи не лезли.

А как же девушки программисты?

Я не про деньги, а про время. Нахера постить 4 одинаковых поста. Время некуда девать?

Менторство, новый набор

Всем привет! Возможно вы помните мой прошлый пост про поиск стажеров.

Прошло уже три месяца, и думаю стоит поделиться результатами.

Свой образовательный эксперимент я назвал “предполетная подготовка”, чтобы не путаться в терминах “проект” как менторство и “проект” как кодовая база.

Основной идеей так же остается концепция командной работы над проектом: я даю задачи, команда их декомпозирует, распределяет между собой. После того как фича сделана — оформляется пулл-реквест, команда ревьювит его сначала сама, а затем ревью провожу я.

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

— Всего мне пришла 21 заявка.

— В 16 из них было указано кол-во свободного времени около 8 часов. Остальные — меньше

— Оставил 13 тех, у кого были какие-то минимальные (по моей субъективной оценке) знания. Исходил из описания в заявке и коде на гитхабе

— В дальнейшем (после основного набора) не было ответа по 6 заявкам, кажется.

Я выбрал 4 кандидатов, 2 фронта и 2 бека. После знакомства мы потихоньку начали работать над проектом. С самого начала работало по факту только 2 человека. Один из фронтов почти сразу нашел работу (не моя заслуга, разумеется). Второй бэкендер за 2 месяца по различным причинам не сделал ни одного коммита. Я предлагал помощь и был всегда готов ответить на любые вопросы, но, видимо, проект не был в приоритете и мы расстались по моей инициативе.

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

В какой-то момент у нас в команде бэкендеров не было, и мне пришлось сделать кое-что самому. Пройдя по списку заявок, я нашел еще 2 бэкендеров — одним уже доволен, а от другого пока жду первых результатов.

Фронтендер тоже нашелся, но времени и скилов ему пока не хватает, поэтому я решил взять третьего. Надеюсь найти его после этого поста.

Не столь важно, что мы делаем, важно, что мы это делаем очень медленно 🙂 Я не знаю точно, сколько времени в неделю тратят ребята в действительности. Пытался напоминать им про выставление часов в тикетах — не пошло. Буду пробовать еще раз, возможно, другим путем. Дедлайнов у нас нет т.к. все люди взрослые, у всех семья, личная жизнь и все такое, поэтому каждый работает по мере своих возможностей.

Хоть мне пока и не удалось получить тот технический опыт, на который я рассчитывал, в связи с тем, что работа идет медленнее, чем я планировал, мне нравится этим заниматься. Лучший способ что-то хорошо изучить — это объяснить тему другим. Каждый раз, когда объясняю что-то: как надо делать, как не надо, почему и как это работает — даже имея многолетний опыт работы, я все равно лезу сверяться с документацией или другими источниками, иногда отмечая для себя какие-то нюансы.

Одна из сложностей при код ревью — это найти баланс между количеством итераций ревью и качеством кода. Код ревью иногда затягивается, и это может тормозить прогресс. А темп работы тоже важен, потому как бесконечные правки по ревью могут наскучить, да и не всегда приносят столько же опыта, сколько нафигаченный за тоже время говнокод.

Отзыв от одного из участников:

Участвую в проекте 3 месяца. Изначально хотела подтянуть свои навыки от trainee до джуна. По факту было очень полезно узнать насколько многого я не знаю (и что до trainee еще тоже нужно дойти), даже из тех вещей, которые уже проходила и практиковала на курсах, по книгам и т.д. В жизни всё оказалось несколько по другому.
Иван дает очень подробные ответы на все вопросы и код ревью, и обращает внимание на теорию. Теорию нужно тоже читать и перечитывать. Узкие места JS становятся понятнее, как и книга с носорогом (мы все ее купили, 7-е издание 2020 г). А также становится понятным, как нужно задать вопрос, чтобы получить на него ответ (а не совет обратиться к Гуглу).
Так же из плюсов — свежий стек, фронт на React + TypeScript + Material UI, бэк на Python + Django + можно по согласованию попробовать все самые модные инструменты.
Из минусов — 1) легко не будет, тк предполагается что участники взрослые люди, которые умеют искать и применять нужную информацию + обычно это не информация из распространенных уроков на ютубе, а например из документации, каких нибудь видеогайдов на английском языке, ответы на стаковерфлоу и т.д.
2) Это не TDD, но юнит-тесты нужно писать на всё. Нет, на ВСЁ. На фронте это react-testing-library, по которой тоже не много мануалов и ответов на вопросы в сети. И мок-тесты, по которым в принципе не ясно, как они работают. Но это очень важный и полезный навык.
И все эти пункты дают + 100500 к уверенности на собеседованиях и еще столько же к способности воспринимать критику.
В общем, рекомендую!

Резюмируя полученный опыт, сейчас я остановился на следующем:

— Для стажеров кол-во затрачиваемого времени должно быть где-то 7-8 часов. Меньше совсем не вариант, больше — лучше.

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

— Возможно, стоит собирать информацию по затрачиваемым часам

— Возможно, стоит подумать над дедлайнами. Тут сложно: с одной стороны должен быть механизм который “наказывает” за пропуск дедлайнов. Но с другой — у всех со временем по-разному, и при этом нужно еще синхронизировать команду между собой.

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

— Стоит подумать над проведением семинаров/лекций/презентаций по темам. Идея пока в глубокой пре-альфе т. к. есть более приоритетные задачи.

Источник