Sidebar Toggle

I'm just trying to create a simple toggling sidebar. It toggles horizontally, by coming out from behind the content div, and becoming visible (it is originally set to display:none). The first half of it works, the other does not.
My HTML:

<div id="content">
   
      <div id="contenttop">
         
         <span>News  <img src="img/overlay.png" class="btn-slide" alt="" /></span>    
      </div>
      
      <div id="contentbg">
      
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         
      </div>
      
      <div id="contentbottom">
      
         <span></span>
         
      </div>


      
      
      <div id="sidebar">

<div id="sidebarinnder">

<div id="sidebartop">
         
      </div>
      
      <div id="sidebarbg">
      
         <p>
            ud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         
      </div>
      
      <div id="sidebarbottom">
            
      </div>


</div>

</div>


      </div>


My Javascript:


$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active"); return false;
   });   
   
});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("btn-slide"); return false;
   });
});


I've tried many variations of that, and it does not work. All I want to do is make the sidebar move to the right when .btn-slide is clicked, and for .btn-slide to change to .active. That works; however, I also need the sidebar to move back to the left and change to display:none when .active is clicked. I also need .active to then change back to .btn-slide.

The toggling button works fine, but I can't get the sidebar to move back when .active is clicked. Any ideas?

• Topic Participants

• wil