I have implemented some jQuery to make my div expand vertically, but it is causing a space below the div of equal height. I need this extra space removed.
The specific div in question is the one connected to the footer and contains the content "ABOUT PENDLEY MANOR." If there is a way to revert the div back to its original size before expanding, that would be greatly appreciated.
Check out the live URL:
Here is the HTML code:
<div class="index-about-expandable" id="index-about-expand-container">
<h2>ABOUT PENDLEY MANOR</h2> <a><i class="fa fa-plus index-expand-plus" id="expand"></i></a>
<div class="clearboth"></div>
<p>this is a test</p>
</div>
This is the jQuery script being used:
<script type="text/javascript>
$(function() {
$("#expand").click(function() {
$("#index-about-expand-container").animate({'height': '270px', 'top': "-220px"});
});
});
</script>
And here is the corresponding CSS:
#index .index-about-expandable { background-color: #433131; padding: 1px 10px; color: #fff; width: 240px; margin-top: 27px; position: relative; z-index: 5; overflow: hidden; height: 45px; }
#index .index-about-expandable i { font-size: 14px; float: left; margin-top: 15px; }
#index .index-about-expandable h2 { float: left; margin-right: 20px; }