Адаптивный Tabs на css, при клике раскрывает контент, а как сделать чтобы по клику закрывало контент?

Вариант перестать использовать костыли и написать табы (взять готовые и адаптировать под свои нужды) на JS не предлагать?

Ankhena, это и есть готовый, я только дизайн поменял ну и в линию сделал во всю длину 3 блока.
Ну если при клике нельзя на css сделать, тогда можно добавить чуть js.

Антон Вебсайтовский, я имела в виду, вообще перестать использовать чекбоксы не по назначению

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

Если уж мы заговорили что правильно что нет, тогда можно было сделать и на details )

Антон Вебсайтовский, вообще любой из гугла по запросу "javascript tabs"
Например, https://jsfiddle.net/Ld4uctrw/

Если уж мы заговорили что правильно что нет, тогда можно было сделать и на details )

Не выйдет без js.

Ankhena, может оно и так, там по сути не выйдет только из-за того что под вкладкой контент надо открывать.

Ankhena, между прочим пример ), он не адаптивный, там нет перестроение кнопок в аккордеон. Да мне ниже уже скинули к моему примеру js небольшой.

Антон Вебсайтовский, перестройте сами, как нужно. Гридами это полминуты. Можно даже разметку не менять. Лишним оберткам display contents и вперед.

Через detail не выйдет потому что без js открытие одного не приводит к закрытию остальных

слов нет просто. а как отправить ссылку на твой раскрытый таб?
Эти разрекламированные костыли только вносят сумятицу. Еще и браузеры вкидывают details, section и article.
ни один ридер не видит этих тегов.
Heder используют только для шапки сайта. Это пипец, который не соответствует спецификации вообще.

Ankhena, гриды не использую, думаю рано еще ! не везде может работать.

Froggyweb, ни когда не было такой задачи, чтобы отправлять ссылку где раскрыт таб.

Антон Вебсайтовский, если ваши заказчики с ИЕ, то да, не повезло с гридами. Просто измените разметку, как вам нужно. Благо, с ней вы уже разобрались.
Скрипту без разницы.

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

Антон Вебсайтовский, боги, полдня на то, чтобы блоки местами поменять и 3 свойства в media переопределить?

Ankhena, ага ну не плохо, можешь когда хочешь )), ох уж эти имена классов ) tabs-nav__link tabs-nav__link--active
СПАСИБО.

Ankhena, Пытался добавить плавное появление контента
block.classList.add("tabsb--active").slideToggle("slow");

Чет не вышло, по разному пробовал.

Антон Вебсайтовский, ну хоть JQ подключил?

Ankhena, само собой он стоит на странице есть то что требует его.

Антон Вебсайтовский, смотри ошибки в консоли. И block должен быть jq объектом.

И вообще весь код тогда перепиши на jq, то кашу варишь какую-то

Ankhena, да я на твоем примере пробовал !
block.classList.add("tabsb--active").slideToggle("slow");

Антон Вебсайтовский, мда.. беда
У меня был чистый js

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

Антон Вебсайтовский, вариантов несколько:
1. Написать анимацию на css. Анимировать можно max-height или font-size с line-height. Возможно, нужно будет добавить и паддинги, но это зависит от верстки контента.
2. Дописать анимацию высоты на js (гуглится)
3. Переписать весь скрипт на JQ и использовать .show()

Иначе всё это начинает превращаться в задание, а с ними ходят на фриланс.

Ankhena, а зачем js переписывать, при клике добавляется класс актив, к контенту и он появляется, там же проще сделать как-то можно ! добавить плавное появление, но я пока не сделал, смотрю в инете как можно.

Антон Вебсайтовский, никто не заставляет использовать JQ. Выше написаны варианты и без него.

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

Антон Вебсайтовский, вы JS и JQ совсем-совсем никак?

Используйте querySelectorAllи цикл, если на JS. На JQ $(селектор)

Ankhena, Верно совсем никак )

Кстати по поводу плавного переключения.
Анимация.

.tabs__tab--active {
  display: block;
  animation: showBlock 1s ease forwards;
}
@keyframes showBlock {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Ankhena, Привет, че я тут нашел, вообщем проблемка, пока не решил.

У меняж там иконка еще.

<a class="tabstovnl" href="#tab2"><i class="icon-yss1"></i>Описание</a>

Что выходит, кликаешь на кнопку, приписывается класс к кнопке

<a class="tabstovnl tabstovnl--active" href="#tab2"><i class="icon-yss1 tabstovnl--active"></i>Состав</a>

Глюк в том что, можно нажать на иконку и в нее добавляется класс.

<a class="tabstovnl" href="#tab1"><i class="icon-yss1 tabstovnl--active"></i>Описание</a>

Как это исправить?

Антон Вебсайтовский, это не глюк.

Нормальное и самое простое решение в данном случае: перестать вставлять иконки в разметку. (Это в любом случае разумно)

Либо можно убрать с них pointer-events, а для полного феншуя поставить aria-hidden.

Либо начинать потихоньку изучать js.

Ankhena, я вот у тебя и спросил, раз делала )

.icon-yss3:before{
  pointer-events: none;
}

Не сработало.

<i class="icon-yss1" aria-hidden="true"></i>

Тож не работает.

Антон Вебсайтовский, клик срабатывал по иконке, вы убрали с псевдо, в чем логика?

Aria-hidden нужен, чтобы убрать мусорные теги (а иконки в разметке это мусор) для читалок.

Ankhena, иконка это не мусор, красота. svg

Антон Вебсайтовский, да, а красоту пишут в css. В этом и дело.

кстати, работает так, без бефоре

.icon-yss3{
pointer-events: none;
}