How to position div boxes to each other

Question

See http://www.kaizoku.nl/beta/index.html

I have 3 div boxes on my site, each has the property display set to none and with the jQuery function ShowHide I make the box visible on click. Now the problem I have is that the boxes dont respond to each other visibility, what I would like is that when I click for example box 1 which is above box 3, that box 3 will move to the bottom + 10px of box 1 instead of box 1 overlapping box3...

any idea's?

Answer 1

Try using:

position:relative;
float:left:
clear:both;

on each div...

Answer 2

Sounds like you need to get the position of Box3 relative to Box1. You may want to add columns in for Box1+Box3 and Box2 to help with the relative positioning.

Answer 3

Add an additional animate to the first function:

function ShowHide() {
    if('block' == $('#slidingDiv').css('display')){
        $('div.box3').animate({top: '-=300'}, 1000, function() {
            $("#slidingDiv").animate({ "height": "toggle" }, { duration: 1000 });
        });
    }else{
        $('div.box3').animate({top: '+=300'}, 1000, function() {
            $("#slidingDiv").animate({ "height": "toggle" }, { duration: 1000 });
        });
    }
}

You can also add the animate/toggle function after the if/else and not as a callback, to save some code lines, you have to see how it works out animation wise.

If you want to use a listener and prevent overlapping actions make it like that, instead of function ShowHide ,

   $(document).ready(function() {
        handler = function() {
            $(this).unbind('click', handler)
            if ('block' == $('#slidingDiv').css('display')) {
                $("#slidingDiv").animate({ "height": "toggle" }, 1000, function (){
                     $('div.box3').animate({ top: '-=300' }, 1000 , function() {
                        $("div.box1 a").click(handler);
                     });
                });
            } else {
                $('div.box3').animate({ top: '+=300' }, 1000, function () {
                    $("#slidingDiv").animate({ "height": "toggle" }, 1000, function() {
                        $("div.box1 a").click(handler);
                    });
                });
            }

        }
        $("div.box1 a").click(handler);
    });