Question

I have two div containers with content in them and two buttons outside the container like so:

<div id="containers">
    <div id="container_1">
        awesome container 1 content
    </div>
    <div id="container_2">
        awesome container 2 content
    </div>
</div>

<div id="container_1_button">
    Click me to open container 1
</div>
<div id="container_2_button">
    Click me to open container 2
</div>

I need to be able to animate width and left: to give the effect of the content sliding from the left when clicked. But only one can be open at a time. psuedo code would be: IE: if Container 1 width > 0 set width:0, set left:0 and the same for container 2. So that way if someone clicks on button 2 while container 1 is open it collapses container 1 and then opens container 2 and vice versa.

I have achieve the animation of the width/left pos on one element by using the following jquery:

//the Jquery collapsible left hand sidebarfor mapit
$('#map_sidebar_button').toggle(function(){
    collapseSidebarLeft();
    $('#sidebar_left_map').animate({width:0}, 'fast');
    $('.button_container').animate({left:0}, 'fast');
    $('#map_sidebar_button').removeClass('sidebar_left_button_toggle');
},function(){
    $('#sidebar_left_map').animate({width:260}, 'fast');
    $('.button_container').animate({left:260}, 'fast');
        // add a class to change the background coloring and border of the button
    $('#map_sidebar_button').addClass('sidebar_left_button_toggle');
});

You can see an example of the site that i need this implemented on here:
http://demo.mapitusa.com the left sidebar buttons..

Answer 1

My approach would be to use the .each() method and bind a (single) click to each button with the same class, and depending on which one you clicked (based on its index) then select what awesome container to display.

In this scenario, both awesome containers would have the same class too and will be hidden from visibility using a negative margin of the same value of their width, why? because in this way they won’t show the weird effect produced while animating the width (the elements inside the container will look like floating and arranging themselves during the animation) … so using this html:

<div id="containers">
 <div id="container_1" class="awesome">awesome container 1 content</div>
 <div id="container_1_button" class="buttonsContainer"><a class="button" href="javascript:;">open 1</a></div>
 <div class="clear"></div><!--used in my example to separate floating containers-->
 <div id="container_2" class="awesome">awesome container 2 content</div>
 <div id="container_2_button" class="buttonsContainer"><a class="button" href="javascript:;">open 2</a></div>
</div>

the css for both containers and parent

#containers {
 position: relative;
}
#containers .awesome {
 width: 300px; /* or whatever */
 margin-left: -300px; /* negative value of the width */
 overflow: hidden;
 float: left; /* to illustrate my example */
 display: block; /* if needed */
 /* etc other container properties */
}

then the jQuery where we assign a single click to the same selector (the shared class of both buttons)

$(document).ready(function(){
 $(".button").each(function(i){
  var selector = $(this); // useful to refer to 'this' inside of any nested function
  selector.on("click", function(){
   if($(".awesome").eq(i).hasClass('visible')){
    $(".awesome").eq(i).animate({'marginLeft':-300},{ queue:false, duration: 200}).removeClass('visible');
   } else {
    // collapse all if any
    $(".awesome").animate({'marginLeft': -300},{ queue:false, duration:200, complete: function(){
      // remove to all the class "visible" if any
      $(".awesome")
       .removeClass('visible')
       // animate the corresponding (i) container and add class="visible"
       .eq(i).animate({'marginLeft':0},{ queue:false, duration:600})
       .addClass('visible');
     } // complete
    }); // animate
   } // if else
  }); //on
 }); //each
}); //ready

Notice that we use the complete callback option of .animate() so the next animation will be executed until the first one has been completed, in this case the second container will show up only until the first one collapses.

You can see it working here for better understanding of the effect.