jQuery slideToggle() method helps us to hide and show the matched elements. This is when the lower portion of the element slides up and down the page.

This is very useful in hiding and showing the controls on click.

Here in this article I am showing a simple example to show/hide a div using this method.

In a simple HTML page, I have designed something like this:

<div id="prelogin" class="prelogindiv">Login</b></div>
<div id="login" class="logindiv" >
 Username: <input id="Text1" type="text" /></p>
 <p>
 Password: <input id="Password1" type="password" /></p>
 <p>
 <input id="Button1" type="button" value="Login"/></p>
</div>

Defined styles for the two div I have used in the code above.

<style>
.prelogindiv
{
background:#cc99ff;
width:200px;
height:20px;
}
.logindi
{
background:#8CC43F;
width:200px;
height:150px;
}
</style>

Now in the onload event of the page I have called a javascript function to hide the second div.

<body onload="javascript:divcolp();">

<script language="javascript">
 function divcolp() {
 $("#login").hide();
}
</script>

Now in the onclick event of the div tag I am showing/hiding the div tag.

<script language="javascript">
function slideDiv() {
 $("#login").slideToggle();
}
</script>

Hence, when the div is visible and if we click on first div, second div will hide and vice versa.