Как вывести блок только в случае выбранного определенной радио-кнопки?

Question

[pashabomber]

Добрый день!

У меня есть на странице скрытый блок (допустим, с классом 'hidden').
На этой же странице есть форма с двумя радио-кнопками (у каждой свой айди):

<input type="radio" class="radio" id="radio4" name="r1" checked />
<label for="radio4">Артисты и развлечения   </label>
<input type="radio" class="radio" id="radio5" name="r1" />
<label for="radio5">Техническое обеспечение</label>

Мне надо как-то на JS написать код, чтобы если кнопка с id="radio5" активна, то у скрытого блока убирается класс 'hidden' (и он, соответственно, становится видимым).

Заранее спасибо за помощь!

Answer 1

[justdealman]

function setVisible(e) {
	e.next().show().siblings('label').hide();
}
setVisible($('input[name="r1"]:checked'));
$('input[name="r1"]').on('change', function() {
	setVisible($(this));
});

Answer 2

[Михаил Кузьминов]

Можно без JS

<input type="radio" class="radio" id="radio4" name="r1" checked />
<label for="radio4">Артисты и развлечения   </label>
<input type="radio" class="radio" id="radio5" name="r1" />
<label for="radio5">Техническое обеспечение</label>
<div class="hidden">content</div>

.hidden {
  visibility: hidden
}

input#radio5:checked ~ div.hidden {
  visibility: visible;
}

Comments

[pashabomber]

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