Как без дублирования кода можно реализовать такие табы превращающиеся в аккордеон?

Question

[Петр Сергеев]

Как должно быть


Основная проблема в том, что вкладки динамические и их количество может меняться.
Пробовал сделать на гридах, но столкнулся с проблемой, что контент не растягивается на всю ширину на десктопе(скрин)


Вот код того как я пытался сделать
https://jsfiddle.net/sptuy45m/1/

Comments

[Антон Литвиненко]

юзал как-то этот плагинчик, немного допиленный под себя
https://github.com/samsono/Easy-Responsive-Tabs-to...

[Петр Сергеев]

Антон Литвиненко, неужели необходимо целый плагин подключать для таких вещей и относительно простого решения нет?

[Антон Литвиненко]

Петр Сергеев, там целый плагин всего на 200 строк кода. это достаточно простое решение

[Антон Литвиненко]

Петр Сергеев, вот еще интересный пример
https://codepen.io/kazmeyer/pen/lzqhf

[Петр Сергеев]

Антон Литвиненко, здесь дублирование кода=(

Answer 1

[profesor08]

Кнопки отдельно, блоки контента отдельно, все в одном контейнере. Используя order, можешь скомпоновать кнопки в группу, как на первой картинке.

Comments

[Петр Сергеев]

выглядит немного грязнова-то, к тому же не получится через order т.к. элементы должны быть динамическими.
Разве что через js высчитывать

[profesor08]

Петр Сергеев, у меня как-то получалось с динамическими элементами, order: -1 закинет все что надо в начало. Наверно тут лучше использовать флекс.

[Петр Сергеев]

profesor08, попробую что-нибудь в этом направлении, спасибо

Answer 2

[Ankhena]

Для другого вопроса было, суть одна. Просто grid.
https://jsfiddle.net/Ankhena/ndu0k365/

Comments

[Петр Сергеев]

Здесь не гриды, а flex

Ну и проблема с динамическими табами никуда не ушла, так как width: 33%; подходит для 3 элементов

[Петр Сергеев]

можно конечно js высчитывать количество элементов и задавать нужные размеры....
я просто думал это можно как-то через css сделать нормально, предполагал, что гриды для этого подходят=(*

[Ankhena]

Петр Сергеев, да не важно, лишь бы order работал.
С неизвестным количеством без js не выйдет. Либо order считать и задавать либо ширину или количество ячеек.

[Петр Сергеев]

Ankhena, понял, спасибо

[Петр Сергеев]

Ankhena, подключил js для подсчета табов

Answer 3

[Froggyweb]

Посмотри это. https://codepen.io/gsarig/pen/ExKJEoM

Comments

[Петр Сергеев]

по сути получается, что просто текст заголовков табов дублируется в data-атрибут секции, которая привязана к этой вкладке и в мобильной версии вставляется через before. А если помимо текста там еще иконка какая-нибудь или картинка...
Я думал, что как-то на гридах можно, типа у меня уже даже почти получилось, но контент не получается динамически растянуть на десктопе....
видимо не так уж и просто это сделать, как оказалось=(

[profesor08]

Петр Сергеев, на гридах это не сделать, так как у тебя динамическое количество табов, а следовательно и колонок.

[Петр Сергеев]

profesor08, я даже знаю как это можно было бы сделать на моей реализации,- нужно просто добавить контенту на десктопе grid-column: 1/-1; типа чтобы растянуть его по всем колонкам.
Но это не работает =(. Работает только если точное число указываешь типа grid-column: 1/6;

Как вариант динамически считать количество табов и через js задавать типа grid-column: 1/item.length;

[profesor08]

Петр Сергеев, grid-column: 1/-1 будет работать если указано точное количество колонок.

[Петр Сергеев]

profesor08, блин, жаль, что нельзя динамически по контенту=(