Плавное появление div после клика по input radio

Имеется код:

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

Нужно что бы при клике на input[id=0000] появлялся <li id="0000-open">

А при клике на input[id=1111] появлялся <li id="1111-open">

Элементы li скрыты display:none;

--- далее ---

После клика по input[id=0000] появляется <li id="0000-open"> но теперь если кликнуть по input[id=1111] то появится <li id="1111-open"> а предыдущий <li id="0000-open"> нужно скрыть

Надеюсь что получилось объяснить идею

Попытки готового кода:

$(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()