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

Question

[Антон Вебсайтовский]

Всем привет.
Сделал tabs, при клике на кнопку разворачивает контент, а как еще при клике сворачивать, пока не сделал.
И как добавить эффект плавного открытия контента?

Рабочий пример тут:
https://jsfiddle.net/vlit/ag14ju8s/116/

Comments

[Ankhena]

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

[Антон Вебсайтовский]

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

[Ankhena]

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

[Антон Вебсайтовский]

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

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

[Ankhena]

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

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

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

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

[Ankhena]

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

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

[Froggyweb]

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

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

[Ankhena]

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

[Антон Вебсайтовский]

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

[Ankhena]

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

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

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

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

[Ankhena]

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

[Антон Вебсайтовский]

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

[Ankhena]

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

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

[Антон Вебсайтовский]

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

[Ankhena]

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

[Антон Вебсайтовский]

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

[Ankhena]

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

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

[Антон Вебсайтовский]

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

[Ankhena]

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

[Антон Вебсайтовский]

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

[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>

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

[Ankhena]

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

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

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

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

[Антон Вебсайтовский]

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

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

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

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

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

[Ankhena]

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

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

[Антон Вебсайтовский]

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

[Ankhena]

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

[Антон Вебсайтовский]

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

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

Answer 1

[andand44]

Можно извратиться и добавить туда <input type='reset' /> и тег <form>
Примерно так https://jsfiddle.net/5tvocrnu/1/

Comments

[Антон Вебсайтовский]

А что через css нельзя? надо js добавлять? раз костыль выходит.

[andand44]

Через css только через жуткие костыли. В идеале нужно такие вещи через js делать, без всяких лишних элементов, типа radio. Так будет более предсказуемый результат.

[Антон Вебсайтовский]

andand44, да как бы уже сделал, и так уже переделывал, у меня на js был, но чет он мутный слишком был этот tabs )

Answer 2

[Everybody_Lies]

так как радиобаттон пользователь очистить не может, то у вас всегда будет checked какая либо вкладка.
Если бы вы использовали чекбоксы, то необходимо было добавить лишь :not(:checked).
Сбросить значение радиобаттона можно с помощью js

Comments

[Антон Вебсайтовский]

Учитывая что js маленький, да я не против его использовать.
radio заменить на чекбоксы, проблем же не составит, просто вписать вместо радио. Но будет ли все работать, не будет ли путаницы какой контент открывать и т.д.

[Антон Вебсайтовский]

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

[Everybody_Lies]

Антон Вебсайтовский, как то так

[Антон Вебсайтовский]

Everybody_Lies, спец нет слов )
Только я не понял, а почему контент 1 блок, для трех вкладок ! должно же быть 3 контента, каждая кнопка показывает свой контент.

[Everybody_Lies]

Антон Вебсайтовский, меняется только содержимое контента, поэтому нет смысла в дополнительных блоках. Просто js'ом изменяешь то, что внутри

[Антон Вебсайтовский]

Everybody_Lies, не понял, а как мне для каждой кнопки свой контент выводить. ну содержимое.

$('.content').css('display', 'flex').text('Контент'+id)

Тут один вариант.
То есть в js вписывать контент, яж через php вывожу с бд, чет херня выходит )

[Антон Вебсайтовский]

Everybody_Lies, Если бы вы использовали чекбоксы, то необходимо было добавить лишь :not(:checked), вроде же проще было так сделать, ты мне писал, радио на чекбоксы.