Hiding div with slideDown() in JQuery? [Archive]

bgallegos

01-16-2009, 08:27 PM

I tried it too and it didn't work...

So I wrote this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>


<script src="js/jquery/jquery-1.3.min.js" type="text/javascript"></script>


<script src="js/jquery/jquery-ui-1.6rc4.min.js" type="text/javascript"></script>

<style>
div#box-container {
overflow:hidden;
}

div#box {
position:relative;
background:red;
}
</style>

<script>
$(function() {
$("#hideLink").click(function(event) {

event.preventDefault();

// Get our elements
myBox = $("#box");
myBoxContainer = $("#box-container");

// If shown
if(myBox.hasClass("visible")) {

// Change 'top' of inner DIV to height of outer DIV
myBox.animate({
top:myBoxContainer.height()
},1000,function() {

// Change Height of outer DIV to 0px
myBoxContainer.animate({
height:'0px'
},1000);
});

// Change Link Text
$(this).html("Show Box");

// Set the class to hidden for the toggle
myBox.attr("class","hidden");

} else {

// Change outer DIV height to height of inner DIV
myBoxContainer.animate({
height:myBox.height()
},1000,function() {

// Change 'top' of inner DIV to 0px
myBox.animate({
top:'0px'
},1000);
});

// Change Link Text
$(this).html("Hide Box");

// Set the class to visible for the toggle
myBox.attr("class","visible");
}
});
});
</script>

</head>

<body>

<div id="box-container">
<div id="box" class="visible">
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
This is some text<br/>
</div>
</div>

<a id="hideLink" href="#">Hide Box</a>

</body>
</html>

Might not be exactly what you are looking for, but at least it gives you a starting point!