CODEWITHSUNDEEP
javascriptjquerycsshtml
Hk M
Hk M

Reputation: 73

Any option to move a div to the left side within a container using Onclick event

I am working on JavaScript and jQuery, and my question is related to divs in an HTML page. Given that I am using 2 divs in an HTML page, is there any option to reduce the size of one div and expand the size of another using onclick event. I have a fiddle here which has a div overlapping the other div when clicked.

Here is my code:

$(function() {
  var expanded = false;
  $('#sidebar').click(function() {
    if (!expanded) {
      $(this).animate({'left' : '70px'}, {duration : 400});
      expanded = true;
    }
    else {
      $(this).animate({'left' : '565px'}, {duration: 400});
      expanded = false;
    }
  });
});

Upvotes: 0

Views: 1142

Answers (4)

Mahesh K S
Mahesh K S

Reputation: 775

in below demo we can add n number of div children "mainContainer" div Please check DEMO

http://jsfiddle.net/mahesh2524/RqJt7/6/

<div id="mainContainer">
<div id="steam"></div>
<div id="sidebar" class="sidebar"></div>    
<div id="sidebar2" class="sidebar"></div>

Upvotes: 0

Swarna Latha
Swarna Latha

Reputation: 1004

You can use below code to do slidedown and slideup in onclick event

$(function()
  {
      var expanded = false;
      $('#flip').click(function(){
          $("#panel").slideToggle("slow");
      });
  })

Take a look at the working sample at jqfaq.com

Upvotes: 1

yeyene
yeyene

Reputation: 7380

If you want vice versa, pls check DEMO http://jsfiddle.net/yeyene/3DpfJ/47/

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

Upvotes: 0

Markipe
Markipe

Reputation: 606

try this one, http://jsfiddle.net/markipe/3DpfJ/45/

    $(function(){
      var expanded = false;
      $('#sidebar').click(function(){
          if (!expanded)
          {
              $('#sidebar').animate({width:'69%'}, 400);
              $('#steam').animate({width:'29%'}, 400);
              expanded = true;
          }
          else
          {
              $('#sidebar').animate({width:'29%'}, 400);
              $('#steam').animate({width:'69%'}, 400);
              expanded = false;
          }
      });
  });

Upvotes: 0

Related Questions