单击下拉按钮时可以缩小区域的任何选项

Question

I am working on jquery and javascript. I am using a drop down button which will be there on top right corner of the container.

So, is there any option to make a container shrink or move to left whenever the drop down button drops down when clicked. and the same vice-verse.

I too have a fiddle which has one the container which slides from left to right and reversal. but i am looking for a solution which makes the container to shrinks or moves to left whenever the drop down button is clicked. here is the fiddle for it.

CODE:

      $('#sidebar').click(function(){
      $(this).animate({width:'100px'},{bottom : 100px}, 400);
      $('#steam').animate({bottom : 100px},{width:'500px'}, 400);

      });
        $('#steam').click(function(){
      $(this).animate({width:'100px'},{bottom : 100px}, 400);
      $('#sidebar').animate({width:'500px'},{bottom : 100px}, 400);
       });

Answer 1

try the below solution in js fiddle link. http://jsfiddle.net/3DpfJ/50/

  [1]: http://jsfiddle.net/3DpfJ/50/

Answer 2

http://jsfiddle.net/33rHZ/1/

This fiddle uses the .change event & I have commented out the check for if expanded , as I don't think you need it. But if you do, simply remove my comments and it should work fine.

In summary:

$(function()
  {
      $('#sidebar').change(function(){
          {
             $('#sidebar').animate({width:'69%'}, 400);
             $('#steam').animate({width:'29%'}, 400);
             $('#sidebar').animate({width:'29%'}, 400);
             $('#steam').animate({width:'69%'}, 400);
          }    
      });
  });

Very tidy.