jquery slider problem with changing ID of span

Question

Hey all, i am in need of some help trying to figure out why this code is not working as it should:

$('#slickbox').hide();

$('#slick-show').click(function () {
    $('#slickbox').show('slow');
       $('#userSetupP').text('User Custom Panel (click to close)');
       $('#slick-show').attr('id', '#slick-hide');
       return false;
});

$('#slick-hide').click(function () {
       $('#slickbox').hide('fast');
       $('#userSetupP').text('User Custom Panel (click to open)');
       return false;
});

And the HTML

 <span id="slick-show">
     <div id="userSetupP">User Custom Panel (click to open)</div> 
     testing <br />
     this out <br />
 </span>

 <div id="slickbox" style="display: block;">
   blah blah blah
 </div>

The id does change when i first click on it and also changes the "User Custom Panel (click to open)" to "User Custom Panel (click to close)". However, when i try clicking it a second time to close it, it does nothing but stay on the "slick-show" click event.

Any help would be great :o)

David

Answer 1

demo

$('#slickbox').hide();
$('#slick-show').click(function () {
    var flag = $('#slickbox').is(':visible');
    $('#slickbox').toggle(flag?'fast':'slow');
    $('#userSetupP').text(flag?'User Custom Panel (click to open)':'User Custom Panel (click to close)');       

});​