CODEWITHSUNDEEP
javascriptjquery
Imza86
Imza86

Reputation: 7

JQuery SlideToggle and DIV below it

this my website again http://www.noor-azmi.com/nt/

So when i click on the button "Click for Darwin gallery" the panel will slide down and overlap the content below.

How do i make it when i click the button , the white content area will go down to make space for the gallery panel ?

I would like the content below to automatically readjust when the gallery panel opens.

This is my Jquery code:

<script type="text/javascript">
    $(document).ready(function(){
        $(".fancybox").fancybox ();

        $("#darwin_button").click(function(){
          $("#darwin_panel.panels").slideToggle("slow");
        });

        $("#kakadu_button").click(function(){
          $("#kakadu_panel.panels").slideToggle("slow");
        });

        $("#alice_button").click(function(){
          $("#alice_panel.panels").slideToggle("slow");
        });
    });
</script>

Upvotes: 1

Views: 130

Answers (2)

Johannes
Johannes

Reputation: 67738

It has to do with your boxes being floated elements which doesn't automatically create space for them in the surrounding container.

Change your height settings to min-height here:

#boxesWrapper { min-height: 430px; }

.HomeBoxes { min-height: 400px; }

(instead of "height 430px" and "height 400px")

and add a clearing rule to the subsequent element:

#content { clear: both; }

Upvotes: 1

Mandeep Gill
Mandeep Gill

Reputation: 4885

You have height on very div this cause a issue but i can't explain it all so here is just fix.

.HomeBoxes {
    width: 300px;
    float: left;
    /* height: 400px; */
    margin-top: 10px;
    margin-left: 10px;
    background-repeat: no-repeat;
    padding-bottom: 20px;
}

and .Content class div :

#content {
    clear: both;
    width: 100%;
    background-color: #FFFFFF;
    /* height: 270px; */
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
}

This will fix the issue, padding will add more spacing at bottom when you click on link. if you think padding is extra you can use jquery to expend padding while opening or closing.

Upvotes: 1

Related Questions