Как сделать адаптивные табы?

Question

[Виталий Мельничук]

Привет Всем. Есть одна проблема, и не могу ее решить.
Сделал такие вкладки prntscr.com/frw1es все ок, все работает. Но нужно сделать адаптивно все.
Сделал так prntscr.com/frw1pm
Но проблема в том, что на моб телефонах нужно при нажатии на Область сделать .slideToggle Как решить такую проблему, чтобы под каждым блоком города был свой контент?
Вот тут вкладки https://jsfiddle.net/ec3vqg5q/

Answer 1

[Виталий Мельничук]

Уже решил проблему https://jsfiddle.net/15z6r67d/
Всем спасибо за отклик.

Answer 2

[Stalker_RED]

Типа такого? https://jqueryui.com/accordion/
Аккордеоны есть не только на jQuery, если что.

Можно и без js, но возможности похуже:
https://jsfiddle.net/kf9k35n1/

Answer 3

[Александр Белькевич]

Могу быть не прав, и может кто-то предложит более умное решение, но мне кажется, что если на мобиле заменять один табы на другие. Можно еще по другому.
Контентную область сунуть в li. И ее абсолютно позиционировать на пк

Answer 4

[Юнус Газиев]

Можно уложить все табы в ряд, и добавить к ним скролл, аля табы в анодроид приложениях типа YouTube, далее при прокрутке страницы, клеить табы к верху экрана.