Div width widens / shrinks when pressed

Question

For the site that I create for myself and my friend, I have a container / wrapper div with two other divs in it: one occupies the left half and has a black background, and the other occupies the right on a white background, in fact, this allows me to get broken color background. Each div contains half the logo. Here's a page temporarily placed so that you guys can see it.

http://djsbydesign.com/tempsite/index.htm

In any case, I would like to have links on the left and right sides of the page that, when clicked, will cause their respective divs to expand from 50% to 100%. I have a few ideas, but I'm not quite sure how to do this (I'm pretty new to javascript). The first one would be for the z-index div extension to be something higher than the non-expandable one, and then expand (somehow), and the other to expand the expanding div to 100%, while the other shrinks to 0% with equal speed.

The bottom line is that I do not know how to do this. I don't mind using mootools or jQuery for writing.

Answer 1

The following seems to work:

$('#left-bg, #right-bg').click( function(){ $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); }); 

Although I'm not sure how you plan to return the “other” div .

JS Fiddle demo .

---

Edited to add a button (via jQuery), which allows you to return as a div to its original size:

 $('#left-bg, #right-bg').click( function(){ $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); $('<button class="show">Show all</button>') .appendTo('#wrapper'); }); $('.show').live('click', function(){ $('#left-bg').animate( { 'width': '50%' },600); $('#right-bg').animate( { 'width': '50%' },600); $(this).remove(); }); 

Updated JS script .

---

Edited to answer the question posted by OP in the comments:

Is there a way to redirect the page after the animation is complete?

Yes, just add the line window.location.href = "http://path.to.url.com/";

 $('#left-bg, #right-bg').click( function(){ $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); $('<button class="show">Show all</button>') .appendTo('#wrapper'); window.location.href = "http://www.google.com/" // <-- this line redirects. }); $('.show').live('click', function(){ $('#left-bg').animate( { 'width': '50%' },600); $('#right-bg').animate( { 'width': '50%' },600); $(this).remove(); }); 

Updated JS script .

---

Edited in response to the error report (in the comments):

Another mistake (a simple fix) is that every time you click on any of the divs a new button is created. So say that you clicked on the left half, and it expanded, filled the page, etc., and then you clicked on it again (it is now somewhere on the page). He will try to add a second button.

To prevent the second button from being added to the div , just add an if :

 $('#left-bg, #right-bg').click( function(){ if (!$('.show').length) { $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600); $('<button class="show">Show all</button>') .appendTo('#wrapper'); window.location.href = "http://www.google.com/" // <-- this line redirects. } }); 

That will add only button or even animate div s if the $('.show') selector returns no .

However, if you are also redirected to another page by clicking the button, this should still not be a problem, since none of the jQuery on the original page will go out / have access to the page to which the user is redirected (if this is not a page in your own domain, and you obviously decided to add the same button ).

Answer 2

If you give absolute positions to your div, so the 1st is positioned in the upper left corner and the other in the upper right corner. And then in the click event, you can reposition the other top corner of the div you want to expand.

You can use jquery to make this easy. Check the jquery documentation for installing css.

Answer 3

It looks like you have included jQuery, so use this! This allows the simplest library to perform simple animations with.

Here's an example click function that will shift the right background by 100%, as you said:

 $('a#link').click(function(e) { e.preventDefault(); $('#left-bg').animate({ width : '0%' }, 'slow'); $('#right-bg').animate({ width : '100%' }, 'slow'); }); 

Obviously, in order to go in the other direction, you switched the width values ​​in the object passed in the animation function.

If you are new to the animate function, check out the docs, but basically you just pass the CSS rules in the key: value object, and that will change the CSS values ​​over time - by animating it!

Hope this helps!