Home/ Questions/Q 7720417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T03:40:07+00:00

So I am trying to have a div slideToggle when this link is clicked.

  • 0

So I am trying to have a div slideToggle when this link is clicked. And the slideToggled div “should” push down the div’s below it when it toggles. But it seems to just barely slide or slide behind the divs below when i toggle it. Idk why it is doing this.

Here is the index:

<!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>Johnny Edick's Portfolio</title>
<link rel=StyleSheet href="styles.css" type="text/css" >
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">
            $(function() {

                $("#nav a.expand").click(function() {
                    $('#contactForm').slideToggle('900');

                });
            });

        </script>
</head>

<body>
    <div id="wrapper">

        <div id="header">
            <img src="images/logo/nameBlue.png" title="name"/>
            <div id="nav">
                <ul>
                <li><a href="">about</a></li>
                <li><a href="">work</a></li>
                <li><a href="" class="expand">contact</a></li>
                </ul>
            </div>
            <div id="logo">
                <img src="images/logo/logoCalligraphy.png" />
            </div>
        </div>
        <div id="contactForm">contact</div>
        <div id="content" class="topImage">
            <div id="tagLine" class="roundedCorners">
            <img src="images/tagLine.png" />
            </div>
        </div>
        <div id="recentWork"></div>

    </div>
</body>
</html>

And here is the stylesheet

@charset "utf-8";
/* CSS Document */
body {
    background-color: #e4e4e4;
    /*background-image:url(../../Pictures/paperTextures/bg-pixelated-lightgray.jpg);*/
    font: 16px/26px Georgia, "Times New Roman", Times, serif;
    margin:0;
padding:0;
}
.roundedCorners{
    -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
#wrapper {
    width: 800px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    position:relative;
    top:0;
}

#header {
    width:800px;
    float:left;
    margin-bottom:5px;
    /* background-color: #685c58;    */
}
 img[title="name"]{
     padding-top: 50px;
     float: left;
 }

#logo {
    float: right;
    position:relative;
    top:0;
    right:0;
}

#nav {
    width: auto;
    float: left;
    margin-top: 60px;   
    margin-left: 50px;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: left;
    width: 350px;
    }

ul li{
float: left;    
}
ul a {
    display:block;
    padding: 0 2em;
    text-decoration: none;
    color:#000;
}
.topImage{
    background: url(images/top.png) no-repeat left top;

}
#contactForm {
    background: blue;
    width: 800px;
    height:600px;
    float:left;
    display:none;
    overflow:visible;
}
.expand{}
#content {
    width: 780px;
    float: left;
    padding-top: 20px;
    padding-left: 20px;
    padding-left: 20px; 
    background-color: #fff;
}
#tagLine {
    width: 760px;
    height: 250px;
    float: left;
    background: #97a3a7;
}
#recentWork {
    width: 800px;
    background-color:#ffffff;
    float: left;
    height: 300px;
}
#logo {
    margin-top: 0px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tested it here http://jsfiddle.net/yVNBM/ and it works pretty good to me.

    I think you problem was that you need e.preventDefault(); on the contact and href=”#” instead of just href=””

    Also, try using the latest jQuery (1.7)

    • 0