Question

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.com/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.

Answer 1

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 comments:

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

Yep, 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 Fiddle.

---

Edited in response to bug report (in comments):

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.com/" // <-- 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).