# Need help on slide down or slidetoggel effect

**URL:** <https://forum.kirupa.com/t/need-help-on-slide-down-or-slidetoggel-effect/331077>\
**Category:** web dev\
**Created:** [May 10, 2013, 8:25pm UTC](https://forum.kirupa.com/t/need-help-on-slide-down-or-slidetoggel-effect/331077 "2013-05-10T20:25:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vsvinit0](https://avatars.discourse-cdn.com/v4/letter/v/7c8e57/32.png) [@vsvinit0](https://forum.kirupa.com/u/vsvinit0)\
**Post date:** [May 10, 2013, 8:25pm UTC](https://forum.kirupa.com/t/need-help-on-slide-down-or-slidetoggel-effect/331077/1 "2013-05-10T20:25:55Z")

</div>

Hello every one ,  
This is my first time i am posting my doubts in any of the web development forum.  
I am a newcomer in web designing and web development …  
Actually i am having some problem to design a slide down or slide toggle effect for a div area .  
As i don’t know much about java script or jQuery so please any body help me to sort out my problem .

## HTML CODE

\<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)”\>  
\<html xmlns=“[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)”\>  
\<head\>  
\<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /\>  
\<title\>Demo\</title\>

\<!-- stylesheets --\>  
\<link rel=“stylesheet” type=“text/css” href=“css/style.css” /\>  
\<!-- end of stylesheets --\>

\</head\>  
\<body\>

\<!-- Body --\>  
\<div class=“body”\>

\<!-- Start Of div Banner --\>  
\<div class=“banner”\>  
\<div id=“banner”\>Section A  
\<p\>\<i\>\<b\>Some Text Here !\</b\>\</i\>\</p\>  
\</div\>  
\</div\>  
\<!-- End Of div Banner --\>

\<!-- Login Box --\>  
\<div class=“login”\>  
\<div id=“left\_login”\>LogIn  
\</div\>  
\<div id=“right\_login”\>  
\<form class=“user”\>  
User Name: \<input type=“text” name=“firstname” /\>  
Password: \<input type=“password” name=“pwd” /\>  
\</form\>  
\<form class=“hopin”\>  
\<input type=“button” class=“hop” value=“Hop In”\>  
\</form\>  
\</div\>  
\</div\>  
\<!-- End Of Login Box --\>

\<!-- Search Box --\>  
\<div class=“search”\>  
\<div id=“search”\>Search  
\</div\>  
\</div\>  
\<!-- End Of Search Box --\>

\<!-- Register Box --\>  
\<div class=“register”\>  
\<div id=“sign”\>SignUp  
\</div\>  
\</div\>  
\<!-- End Of Search Box --\>

\<!-- Footer --\>  
\<div class=“footer”\>  
\</div\>  
\<!-- End Of Footer --\>

\</div\>

\</body\>  
\<!-- End Of Body --\>  
\</html\>

## CSS CODE

@charset “utf-8”;  
/\* CSS Document \*/

/_--------------------------------------------------------------------------  
######################## Style Of Div Body #################################  
---------------------------------------------------------------------------_/

.body  
{  
position:absolute;  
top:0;  
left:0;  
width:100%;  
height:auto;  
}

/_---------------------------------------------------------------------------  
######################### Style Of Banner Area ##############################  
----------------------------------------------------------------------------_/

.banner  
{  
width:100%;  
height:180px;  
background-color:#411d67;  
font-family:“Eras Bold ITC”;  
font-size:99px;  
color:#FFF;  
}

.banner p  
{  
font:18px normal Verdana, Geneva, sans-serif;  
margin-top:-20px;  
margin-left:90px;  
}

#banner  
{  
width:100%;  
height:170px;  
padding:10px 0px 0px 80px;  
}

/_---------------------------------------------------------------------------  
######################### Style Of Login Area ###############################  
----------------------------------------------------------------------------_/

.login  
{  
width:100%;  
height:100px;  
background-color:#feac58;  
font-family:“Eras Bold ITC”;  
font-size:50px;  
color:#FFF;  
}

#left\_login  
{  
width:40%;  
height:99px;  
float:left;  
text-align:center;  
line-height:90px;  
}

#right\_login  
{  
width:60%;  
height:99px;  
float:right;  
color:#000;  
}

.user  
{  
float:left;  
width:490px;  
line-height:80px;  
margin-top:10px;  
padding-left:50px;  
font-size:15px;  
font-family:“Palatino Linotype”, “Book Antiqua”, Palatino, serif;  
border-left:2px solid #FFF;  
}

.hopin  
{  
float:left;  
margin-top:10px;  
}

.hop  
{  
background:#feac58;  
}

#click  
{  
font:10px normal Georgia, “Times New Roman”, Times, serif;  
margin-top:-10px;  
}

/_---------------------------------------------------------------------------  
######################### Style Of Search Area ##############################  
----------------------------------------------------------------------------_/

.search  
{  
width:100%;  
height:100px;  
background-color:#d82545;  
font-family:“Eras Bold ITC”;  
font-size:50px;  
color:#FFF;  
}

#search  
{  
width:100%;  
height:80px;  
padding:15px 0px 0px 180px;  
}

/_---------------------------------------------------------------------------  
######################### Style Of Register Area ##############################  
----------------------------------------------------------------------------_/

.register  
{  
width:100%;  
height:100px;  
background-color:#273c67;  
font-family:“Eras Bold ITC”;  
font-size:45px;  
color:#FFF;  
}

#sign  
{  
width:100%;  
height:80px;  
padding:15px 0px 0px 180px;  
}

These are the codes which i have used in my web page and one more thing i dont want to slide the "SECTION A’ area it should be remain constant …  
“NEW IDEAS WILL BE APPRECIATED”

[COLOR=#282828][FONT=proxima-nova]And Here is the link in which i have uploaded all my files …[/FONT][/COLOR]  
[COLOR=#282828][FONT=proxima-nova] [/FONT][/COLOR]  
[COLOR=#282828][FONT=proxima-nova]download Link -------------------- \> " [http://www.2shared.c…jkwcI/Demo.html](http://www.2shared.com/file/bpojkwcI/Demo.html) " [/FONT][/COLOR]