For a site I'm making for myself and a friend, I have a div container/wrapper with 2 other divs within it: one occupies the left half and has a black background and the other occupies the right with a white background. Essentially, this lets me get a split colored background. Each div holds half of a logo. Here's the page, temporarily hosted so you guys can see it.

.htm

At any rate, I'd like to have links on the left and right hand sides of the page that, on click, cause their respective divs to expand from 50% to 100%. I have a few ideas, but am not sure entirely how to go about doing this (I'm rather new to javascript). The first would be to have the expanding div's z-index set to something higher than the non-expanding one, and then have it expand (somehow), and the other is to have the expanding div expand to 100% while the other shrinks to 0% at an equal rate.

The bottom line is, I have no idea how to go about doing this. I don't mind using mootools or jQuery, for the record.

For a site I'm making for myself and a friend, I have a div container/wrapper with 2 other divs within it: one occupies the left half and has a black background and the other occupies the right with a white background. Essentially, this lets me get a split colored background. Each div holds half of a logo. Here's the page, temporarily hosted so you guys can see it.

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

At any rate, I'd like to have links on the left and right hand sides of the page that, on click, cause their respective divs to expand from 50% to 100%. I have a few ideas, but am not sure entirely how to go about doing this (I'm rather new to javascript). The first would be to have the expanding div's z-index set to something higher than the non-expanding one, and then have it expand (somehow), and the other is to have the expanding div expand to 100% while the other shrinks to 0% at an equal rate.

The bottom line is, I have no idea how to go about doing this. I don't mind using mootools or jQuery, for the record.

• javascript
• jquery
• html
• mootools

Share Follow asked Feb 19, 2011 at 23:48 SalemSalem 1,17244 gold badges2020 silver badges3030 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

The following seems to work:

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

Albeit I'm not sure how you'd plan to bring back the the 'other' div.

JS Fiddle demo.

---

Edited to add a button (via jQuery) that allows both divs to be reverted to original dimensions:

$('#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 Fiddle.

---

Edited to address the question left by OP in the ments:

is there a way to have a page redirect after the animation pletes?

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

$('#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./" // <-- this line redirects.
    });

$('.show').live('click',
                function(){
                    $('#left-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $('#right-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $(this).remove();
                });

Updated JS Fiddle.

---

Edited in response to bug report (in ments):

The one other bug (easy fix) is that any time you click on either of the divs, it creates a new button. So say you clicked on the left half, and it expanded and filled the page, etc., and then you clicked on it again (it being anywhere on the page now). It would attempt to add a second button.

To prevent a second button 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./" // <-- this line redirects.
        }
    });

Which, will only append a button, or indeed animate the divs, so long as the $('.show') selector returns no matches.

However if you're also redirecting to another page by clicking the button it shouldn't be an issue anyway, since none of the jQuery on the original page will exectute/be able to access the page to which the user is redirected (unless it's a page on your own domain, and you've explicitly chosen to add the same button).

If you give absolute positions to your div's such that - 1st is positioned at top left corner and other is positioned at top right corner. And then in click event you can change the position of the other top corner of the div to be expanded.

You can use jquery to do this easily. Check jquery documentation for setting css.

Looks like you've got jQuery included, so use that! It's totes the easiest library to do simple animations with.

Here's an example click function that will slide the right background to be 100% like you said:

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

Obviously to go in the other direction you'd switch the width values in the object passed to the animate functions.

If you're not familiar with the animate function, check the docs, but basically you just pass CSS rules in a key : value object to it, and it'll change the CSS values over time - animating it!

Hope this helps!