Как показать div у активного радио?

Question

[Jack OXO]

Вот пример:

Надо при активном радио показать скрытый в нем див, а при смене убрать.

Answer 1

[Gleb Qeemerc]

Если div находится в radio, то можно реализовать так:

$(".radio").click(function(){
// Прячем другие открытые блоки div
$(".hidden-content").removeClass("active");
// Добавляем div'y, который является потомком нажатого инпута класс active
$(this).children(div).addClass("active");
})

Comments

[Jack OXO]

Он не в .radio, эту идею я понял, но мне желательно сделать не через click, а есть ли вариант использовать как то состояние checked через jquery, не атрибут, а состояние, как псевдоэлемент?

[Gleb Qeemerc]

OXOJeck, как это не в .radio, если в условии написано "скрытый в нем див"? Так он дочерний элемент или нет?

[Jack OXO]

Qeemerc, вот код https://codepen.io/oxojeck/project/editor/XobNMY

[Gleb Qeemerc]

OXOJeck, с такой структурой делать без клика - это нечитабельно будет и бессмысленно.
Если в кратце идею без клика ( не понятно, зачем ), то примерно так:

$(input).change( function(){
// Как вариант - вычислить индекс инпута и показать блок с таким же индексом. 
})

[Jack OXO]

Qeemerc, получается надо ещё на label навесить событие? И как он скрываться будет, addClass, removeClass или как лучше?

[Gleb Qeemerc]

OXOJeck, зачем на label событие ? Нужно любым способом указать им index (просто числовое значение, чтоб соответствие было). Например, через атрибуты dataset.
HTML:

<input type="radio" ... data-index="1">
<input type="radio" ... data-index="2"> 
<input type="radio" ... data-index="3">

и такие же примерно class/ID у label.

JavaScript:

$(input).change( function(){
const index = $(this).dataset.index;
$(label).removeClass('active");
const label = `label-${index}`;
$(label).children("div").addClass("active");
})

Но уже видно, как для простейшего момента обрастает лишним кодом.

[Jack OXO]

спасибо, не знал, попробую

Answer 2

[Козебожка]

Кажется так должно работать

[type="radio"]:checked + .hidden-content{
  disply: block;
}

Comments

[Jack OXO]

Там же нет атрибута checked, надо на jquery

[Козебожка]

OXOJeck, htmlbook.ru/css/checked

[Василий Варюхин]

OXOJeck, Зачем jQuery если можно на чистом css?

[Jack OXO]

Василий Варюхин у меня намного сложнее пример, сейчас вот поправил, без jquery никак