CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Amar Pawar
Amar Pawar

Reputation: 177

How to keep the height of parent div same after the child div slides up?

<!DOCTYPE html>
<html>
<head>
<style>
.main_box{
    width:400px;
    border:1px solid #000000;
}
.option-heading{
width:292px;
border:1px solid #000000;
background-color:#FFCC00;
overflow:auto;
padding:4px
}
.option-content{
width:300px;
height:300px;
border:1px solid #000000;
background-color:#8AC007;
}
 .arrow-up{width:25px;float:right;}
  .arrow-down{width:25px;float:right;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".arrow-up").hide();
    $(".option-heading").click(function(){
            $(this).next(".option-content").slideToggle(500);
            $(this).find(".arrow-up, .arrow-down").toggle();
    });
});
</script>
</head>
<body>
<div class="main_box">
<div class="option-heading">
 <div class="arrow-up"><img src="Untitled.png"></div>
    <div class="arrow-down"><img src="Untitledone.png"></div>
</div>
<div class="option-content"></div>
</div>
</body>
</html>

When I click on "option-heading" div, "option-content" div slides up but also the height of "main_box" div changes. I want to keep the height of "main_box" div same after the "option-content" div slides up.

Does anyone know how to do it??

Upvotes: 2

Views: 61

Answers (3)

user3687550
user3687550

Reputation: 57

    .main_box{
     min-height:300px;
     height:auto;
    }

use height:auto

Upvotes: 0

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

you can do it easily, you just have to set min-height to whatever sum of height of .option-heading, .option-content and border size so its 336px

so update styling of .main_box

.main_box {
width: 400px;
border: 1px solid #000000;
min-height: 336px;
}

Upvotes: 1

FungyBytes
FungyBytes

Reputation: 413

Make use of the min-height property. It allows you to set the minimal height of a given element.

.main_box {
     min-height: 300px;
}

Upvotes: 0

Related Questions