Feeling daft - help with sliding tabs / resetting css values.

Feeling daft - help with sliding tabs / resetting css values.

Hi all,


I'm an extreme newbie when it comes to jQuery...


I have some panels - they slide out when the corresponding tab is clicked. 
I've used .toggle() to get this working, and animate the right (absolute) position to move the panel left or right.
This works fine on it's own, but within the panel, I have to have an additional 'close' button. 


my script, and I'm sure it's really convoluted, but with my limited knowledge it was the only ways I could think to achieve what I wanted:


  1. $(function() {
    $('a#tab').toggle(
           function() {
                 $('#hiddenDiv').show();
                 $('#containerDiv').animate({  
                                        right: '+=580'
                                  });
    return false;
    },
           function() {
                 $('#containerDiv').animate({
                                    right: '-=580'
                                  },
                 function() {
                 $('#hiddenDiv').hide();                       });
    return false;
    });
    });

    $(function() {
    $('#hiddenDiv a.xclose').click(
    function() {
    $('#containerDiv').animate({right: '-=580'},
    function() {
    $('#hiddenDiv').hide();
    });
    return false;
    });
    });


HTML:
  1. <div id="containerDiv">
  2.        <span><a href="#" id="tab">Tab text</a></span>
  3. <div id="hiddenDiv">
  4. <p><a href="#" class="xclose">Close</a></p>
  5. <p>Nisi natoque rhoncus dictumst enim odio? Arcu ac et, hac in ridiculus dolor placerat, parturient etiam mattis pid nunc tortor quis tincidunt porta sit elementum etiam penatibus, porta augue penatibus sed.</p>
  6.        </div>
  7. </div>

I understand why it'd doing what it's doing, I just can't figure out how to fix it. Been stuck for hours :(

Is there some way to either;

1. check the position of containerDiv before executing the .toggle - so, if right = 0 (set by a.xclose), then start the toggle from the beginning position? 

2. saying that after #hiddenDiv a.xclose is clicked, reset the position to what's default in the css?

3. Any other option that is really simply that I'm missing entirely?

Thanks in advance! 

Cheers,

Min