There is a code:
<span class="val"> <label><input type="radio" id="0000" name="01" value="0">0000</label> <label><input type="radio" id="1111" name="02" value="1">1111</label> </span>
When you click on input[id=0000] need to <li id="0000-open">
And when I clicked on input[id=1111] , <li id="1111-open">
The li elements are hidden display:none;
--- далее ---
After clicking on input[id=0000] <li id="0000-open"> appears, but now if you click on input[id=1111] <li id="1111-open"> appears and the previous <li id="0000-open"> need to hide
I hope that it turned out to explain the idea
Attempts of the finished code:
$(document).ready(function() { $('input[id='0000']').on('change', function () { $("LI#0000-open").toggle(true).fadeIn(); // fadeIn - плавное появление }, function() { // Скрываем блок $("LI#0000-open").fadeOut(); // fadeOut - плавное исчезновение }); // end of toggle() }); // end of ready()