jQuery Toggle Issue - fading divs in and out

Trying to build a simple toggle where someone clicks a list item with an ID and it displays a div associated with said list item, then on click of a different list item, the first div fades out and the new div fades in, and obviously should work where if you click <li id="1"> then <li id="3">, then back to 1, it works correctly.

Here's my code thus far.

$(document).ready(function() {
    $('#list li').toggle(function() {
        var $value = ($(this).attr('id'));
        $('#song' + $value).fadeIn();
    },
    function() {
        $('#song' + $value).fadeOut(); 
        var $value开发者_Python百科 = ($(this).attr('id'));
        $('#song' + $value).fadeIn();
    });
});

Thanks! matt

An easier way to fade out the currently visible div is to use the :visible selector. Also, if I understand your question correctly, I think you can achieve the desired behavior just using .click() rather than .toggle():

$('#list li').click( function() {
  $('#your_container').find('div:visible').fadeOut();
  $('#song' + this.id).fadeIn(); // simpler, no intermediate variable needed
});