Аккордеон на CSS
Вариант создания аккордеона на чистом CSS
2 примера создания аккордеона без использования скриптов.
Один работает с использованием радиокнопок , а другой с флажками
Пример аккордеона с одной открытой вкладкой
Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже
Еще описание вкладки
И еще описание вкладки
Обратите внимание, что ID для каждой вкладки должны быть уникальные:
Пример аккордеона с несколькими открытыми вкладками
Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки на флажки
Еще описание вкладки
И еще описание вкладки
CSS такой же, как в первом варианте
- Опубликовано: 20.10.2020 / Обновлено: 04.02.2021
- Рубрики: Меню и аккордеоны
- Метки: CSS
- 6074 просмотра
Смотрите также:
Многоуровневое вертикальное меню
Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик
Навигационное меню для лендинга
Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции
Настраиваемое контекстное меню на элементе
Настраиваемое меню вызываемое правой кнопки мыши на заданном элементе
Добавить комментарий:
Комментарии:
Здравствуйте. Спасибо за знания. У меня вопрос, не совсем к вашему коду, но .. близко. У меня используется что-то типа аккордеона, где при открытии каждой вкладке происходит подгрузка содержимого именно этой вкладки. Тип содержимого вкладок одинаково, отличия лишь в конкретных данных числах, названиях и т.д. Проблема собственно в следующем — при открытии страницы с аккордеоном-вкладками открывается первая вкладка со своими данными, тут всё ок, но если открыть следующую вкладку то первые секунд 5-ть. (иногда дольше) то в новой вкладке отображается содержимое первой кладке. Потом происходит обновление содержимого кладки до актуального содержимого. Как бороться? Может как-то скрывать содержимое вкладки(ок) до окончательной загрузки содержимого или svg-шку загрузки показывать? Буду весьма признателен за ссылку на пример.
Без примера сложно что то сказать.
Видеть надо как это работает.
Вот кусок из функции loadedCatasi (в неё вытаскивается массив данных (по вкладкам) из бд)
Мне эта информация вообще ни о чем не говорит…
Напишите мне в ВК или телеграм, нужно на сайте видеть что и как работает.
ЗЫ: эту тему удалю завтра, т.к. она не имеет вообще ничего общего с темой заметки
На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.
Дополнение: если текста больше чем на страницу.
bbobik………………, нормальный БАЯН — зря грешишь, всё работает в нормуль — ручки только нужны с головой, что бы для себя сие подделать!
Источник
Accordion CSS
Вертикальный аккордеон
HTML аккордеон, в отличии от таб-вкладок, должен иметь фиксированную высоту, пусть даже она равна 100% высоты экрана монитора [см. единицу измерения vh]. Его можно применять для создания вертикального меню, которое раскрывается вниз, например, что-то вроде этого [www.cssplay.co.uk].
Код подходит для «резинового» дизайна:
- если содержимое не помещается в поле div , то появляются полосы прокрутки,
- если заголовок вкладки не помещается в строку, то он будет обрезан, в окончании названия проставлено многоточие.
Изначально будет открыта та вкладка, радиокнопка которой помечена checked=»checked» .
На странице может быть несколько аккордионов. id и for каждого input и label соответственно, а также name группы input должны отличаться.
После названия вкладки label может идти любой тег, не обязательно div .
Дополнительная информация
Код подходит для «резинового» дизайна:
- если содержимое не помещается в поле div , то появляются полосы прокрутки,
- если заголовок вкладки не помещается в строку, то он будет обрезан, в окончании названия проставлено многоточие.
На странице может быть несколько аккордионов.
Горизонтальный аккордеон.
51 комментарий:
serdgio Здравствуйте Наташа! По моему я ещё ни разу не писал у Вас в комментариях, хотя уже давно собирался. Конечно же, первым делом выражаю Вам свою искреннюю благодарность, так много полезного вычитал на Вашем блоге, мало того, ещё и воспользовался некоторыми «штучками», которыми Вы так щедро делитесь со всеми нами. Спасибо Вам большое.
Это то, что мне уже давно было необходимым сделать, а теперь к конкретике. На счет вот этого «аккордеона», попробовал его поставить на экспериментальный блог, получилось довольно не плохо. Но сделал это не в сообщении, а на отдельной странице, так как при открытии все, что находится ниже съезжает вниз. Хотя, это не так важно, ведь при закрытии возвращается обратно и человек может читать дальше,так что можно и сообщение поставить (попробую). А спросить хотел вот что: как Вы считаете, будет ли индексироваться тот текст, который находиться внутри. То есть, сможет ли увидеть его ПС?
И если Вы не возражаете, то я опубликую у себя на блоге пост про Вас и ваши полезности со ссылкой на ваш блог (открытой), а потом вернусь и оставлю свою ссылку? На этот вопрос можете ответить по почте misecondi45@gmail.com. И еще раз Вам спасибо! NMitra Здравствуйте, приятно слышать!
Да, поисковые системы его превосходно индексируют, они читают код, который можно увидеть, нажав правую клавишу мышки на странице сайта-«Исходный код страницы».
Вот только как они его воспримут затрудняюсь сказать.
У «страниц с невидимым или слабовидимым текстом или ссылками» могут быть проблемы с ранжированием и индексированием (http://help.yandex.ru/webmaster/?id=995298#995342). Дело в том, ряд веб-мастеров размещают контент только для поисковых систем, которые не нужно видеть пользователю, чтобы повлиять на позицию в выдаче. Например, когда количество ключевых слов на странице было определяющим фактором, они прятали «купить машину купить машину купить машину. » и так несколько сток в display: none. Тоже самое с ссылками: продавали ссылки со страницы, но посетителям они ни к чему. Поисковики стали наказывать.
Но с другой стороны, сейчас активно используют раскрывающее меню, которое построено на том же display: none. Или моя страница со скриптом показать/скрыть текст http://yandex.ru/yandsearch?text=%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B+%D0%B4%D0%BB%D1%8F+%D0%B2%D0%B5%D0%B1%D0%BC%D0%B0%D1%81%D1%82%D0%B5%D1%80%D0%B0&clid=50368&lr=51. И они прекрасно себя чувствуют в выдаче. Даниил Юрьевич Ну прям очень интересные эфекты =). Где нибудь реализую, точно! Mails а как в первов варианте поменять цвет шрифта с черного на белый в заголовке и в выплывающем тексте? NMitra .menu15
ОПИСАНИЕ —
текст описания
ИНГРИДИЕНТЫ +
РЕКОММЕНДАЦИИ + Mails И как при наведении на нужную строку меню сделать так чтобы она меняла свой цвет??Пользуюсь первым вариантом вариантом NMitra .menu15 li > label
.menu15 li > input:checked + label:after
.menu15 li:hover > label
Mails Это полностью если выделить background, а только текст, как во втором? NMitra Текст — свойство color
Mails, прошу, не нужно больше вопросов, у тебя для этого есть педагоги. Зачем тебе вообще институт, для чего тратишь время людей? 5 лет! Армия — 1 год! Купи корочку диплома и займись чем-нибудь полезным для себя. Х.З., может ты хочешь быть гениальным заправщиком на АЗС или суперпродавцом. У меня вон пример знакомого, который ничего не умеет в 30 лет кроме как сидеть у родителей на шее. Для этого высшее образование не нужно. Mails Спасибо за время, которое вы уделили для мня. Горячая точка. Страйкбол А не подскажите, как сделать так чтоб первый вариант меню не сворачивался после выбора пункта меню? Например: зашел в «Заголовок 2» выбрал «Вкладку 2» и перейдя на новую страницу, привязанную к этой вкладке, меню осталось с открытой «Заголовок 2″. Заранее спасибо за ответ. NMitra См http://shpargalkablog.ru/2013/06/localStorage.html#checked Горячая точка. Страйкбол Это ж отдельные функции, а мне бы именно это меню, чтоб оно при переходах не сворачивалось. NMitra Аааа, я не поняла сначала, хотя и сейчас мне не очень понятно. В ссылке поставьте target=»_blank» Горячая точка. Страйкбол А теперь я не понял) куда именно вставить этот текст? Горячая точка. Страйкбол У меня это меню планируется так: в каждом «заголовке» несколько «вкладок», каждая вкладка это ссылка на другую страницу сайта. Я хочу чтоб после перехода на новую страницу, выбранный перед этим «Заголовок» оставался открытым на новой странице. Вот так как-то. NMitra Вкладка будет открытой, пока страницу не закроете. А чтобы ссылка открывалась в новом окне, используйте:
или же приписывать sessionStorage к input, чтобы комп пользователя запоминал какой радио должен быть checked Горячая точка. Страйкбол А куда именно в строке с input вставлять sessionStorage?
NMitra После html кода пропишите:
Скрипт, наверно, можно как-то более красиво написать с меньшим количеством символов, но я сейчас не в силах думать над этим вопросом. Этот вариант работает безотказно. Горячая точка. Страйкбол Спасибо большое, по возможности буду пробовать) Денис Демин Ребята, всем привет. Делал себе 8 вкладок и напоролся на то,что открываются только 3 первые. Если кто-то не хочет копаться, то вот решение. Очень простое :
К каждой вкладке надо дополнительно прописать строку. Разумеется к каждой дополнительной, после третьей. У меня их 8. Строки дописываем в CSS . ну и разумеется в коде HTML. вот CSS поправочки. В HTML, все так же по примеру на сайте :
.horizontal-click > [name^=»vkl»]:nth-of-type(1):checked
[for^=»vkl»]:nth-of-type(1) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(2):checked
[for^=»vkl»]:nth-of-type(2) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(3):checked
[for^=»vkl»]:nth-of-type(3) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(4):checked
[for^=»vkl»]:nth-of-type(4) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(5):checked
[for^=»vkl»]:nth-of-type(5) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(6):checked
[for^=»vkl»]:nth-of-type(6) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(7):checked
[for^=»vkl»]:nth-of-type(7) + *,
.horizontal-click > [name^=»vkl»]:nth-of-type(8):checked
[for^=»vkl»]:nth-of-type(8) + * <
overflow: auto;
height: 310px;
>
.horizontal-click > [name^=»vkl»]:nth-of-type(1):checked
[for^=»vkl»]:nth-of-type(3),
.horizontal-click > [name^=»vkl»]:nth-of-type(4):checked
[for^=»vkl»]:nth-of-type(8) <
background: #454545;
cursor: default; NMitra Денис, спасибо за дополнение! Анонимный Более простое решение.
http://jsfiddle.net/m3teersj/
NMitra Согласна, что input нужно разместить рядом с div, тогда вместо трёх строк достаточно одной. Но вот transition с display не работает. Штиф Васлер Наталья, подскажите пожалуйста! Почему в моем варианте не работает transition? Никак не могу разобраться http://cssdeck.com/labs/nkk7vnqg NMitra Со свойством display анимация не работает (список возможных http://www.w3.org/TR/css3-transitions/#animatable-css )
Замените на visibility (см. http://shpargalkablog.ru/2012/12/display-visibility-css.html ) Штиф Васлер Большое спасибо за подсказку! Анонимный День добрый.
Скрипт очень удобный, решил добавить к кнопкам не текст а картинку. Как переключаться между картинками по клику?
Роман. Анонимный Примерно так:
div
input type=»radio» name=»anons» checked=»checked»
label for=»anons1″
img src=»http://shpargalkablog.ru/2011/07/images/imgleft001.png» style=»float: left;»
/label
div div NMitra Добрый день, лучше в стилях прописать background http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html Например для второй вкладки (здесь же можно с высотой поиграть, убрать текст)
.horizontal-click label[for=»vkl2″] <
background-image: url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg);
background-size: cover;
>
Если поле активное
.horizontal-click > :checked + label[for=»vkl2″] <
background-image: url(http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg);
> Анонимный Спасибо за ответ, но хочу сделать немного другое. Для .horizontal-click > :checked + label использую background-image. Для каждого label существует своя картинка: a href=»#» . Задача изменять эту картинку на другую (.png), т.е переключать btnM1 по .horizontal-click > :checked + label.
Роман. Анонимный Натадья,
наверное придется остановиться на куче background для активного и не активного label, но картинки тяжелые, хотелось менять только активные иконки без смены основного background.
Роман. NMitra Честно говоря, не до конца понимаю что вы хотите:
1) http://jsfiddle.net/NMitra/8s6y8axt/ (одна картинка — для активного состояния, другая — для неактивного)
2) http://jsfiddle.net/NMitra/8s6y8axt/1/ (у каждого label своя картинка, которая меняется на общую картинку для активного состояния)
3) см. комментарий 36 (у каждого своя активная и неактивная картинка) Анонимный Да, я знаю про этот вариант. Хотел сделать следующее:
1) Для .horizontal-click > label установить единый background-color, но индивидуальные иконки (img.png)
пути к которым прописывать в CSS.
Задача менять IMG1, IMG2 и т.д. при раскрытии активного аккордеона без изменения background-image в пункте 2.
Вариант коммента 39 отрабатывает все на 100%, но background-image большого размера, а IMG иконки весят 10кб.
Как подключить изменение IMG1-1 на IMG1-2 к .horizontal-click > :checked + label.
Перешерстил много примеров, ничего подобного не нашел.
Источник