Перерыл весь интернет в поисках решения, но всё не то. Есть скрытые блоки, которые по нажатию на радио плавно выезжают и заезжают при повторном нажатии
function spoiler(el) {
var text = el.parentNode.querySelector(".spoilerText");
text.classList.toggle('active');
}
.spoilerText {
display: block;
overflow: hidden;
}
.spoilerText {
height: auto;
max-height: 0;
transition: max-height 1s;
}
.spoilerText.active {
max-height: 190px;
}
.spoilerText span {
display: block;
min-height: 100px;
}
<nav>
<div>
<input type="radio" name ="radio" id="ПервыйБлок" onclick="spoiler(this)">
<label for="ПервыйБлок">Фрукты</label>
<div class="spoilerText" id="фрукты">
<a href="#">Абрикос</a> <br>
<a href="#">Авокадо</a> <br>
<a href="#">Айва</a> <br>
<a href="#">Алыча</a>
</div>
</div>
<div class="подменю">
<input type="radio" name ="radio" id="ВторойБлок" onclick="spoiler(this)">
<label for="ВторойБлок">Овощи</label>
<div class="spoilerText">
<a href="#">Картофель</a> <br>
<a href="#">Лук</a> <br>
<a href="#">Чеснок</a>
</div>
</div>
<div>
<input type="radio" name ="radio" id="Остальное">
<a href="#">
<label for="Остальное">Остальное</label>
</a>
</div>
</nav>
Как при нажатии на 2 радио свернуть 1, а при нажатии 3 свернуть 2. То есть оставаться должен тот блок, где активна радио кнопка. Нужна совместимость с IE11. Спасибо!
input[name="radio"]:checked ~ .spoilerText {max-height: 190px;}
Array.prototype.forEach.call(document.querySelectorAll('.spoilerText'), function(item) {item.className = 'spoilerText ' + (item === el.parentElement.querySelector('.spoilerText') ? 'active' : '');});
К сожалению непонятно, что делать сid="Остальное"