slideDown() effect issue

Question

I’ve noticed the slideDown() effect doesn’t work with my div navigationMain, notice how I’m using the ul/li tags for my header menu in the div navigationMain. Also notice how I’ve placed an id name within the a/hyperlink tags for my header nav Portfolio/About/Contact all within the li tags and all in the div navigationMain. I’ve tried using the slideDown() effect for the id #about-link nav button in the navigationMain div and its suppose to open up a hidden div called aboutlayout but it opens up a small section of the div and closes itself immediately. For some reason the slideDown() effect works for another div which doesn’t include the ul/li and a/hyperlink tags. Within that div I’ve just placed an id name in a img tag and the slideDown() effect works. Is it possible that the slideDown() effect doesn’t work well with ul/li and a/hyperlink tags?

JSFiddle: http://jsfiddle.net/Tb8h5/17/ http://jsfiddle.net/Tb8h5/17/embedded/result/ (the navigation menu portfolio/about/contact text isn't appearing on the JSFiddle link, so I’ve added a background colour to show where my navigation menu)

HTML

<div class="header">
<div class="container"> 
<div class="headerMain">  </div>
<div class="navigationMain"> 
<ul class="nav">
<li><a href="" id="portfolio-link">Portfolio</a></li>
<li><a href="" id="about-link">About</a></li>
<li><a href="" id="contact-link">Contact</a></li>
</ul>
</div>
</div>
</div><!-- end of header -->

<div class="aboutlayout"> </div> <!-- hidden div -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2     /jquery.min.js"></script>

CSS

.header {
background: #242424;
height: 165px;
background:url(../images/header.png) repeat center center; 
min-width: 1075px;
}

.container {
height: 165px;
margin-left: auto;
margin-right: auto;
width: 1075px; 
}

.headerMain{
height: 165px; 
position: relative;
width: 195px;
float: left;
left: 20px;
top: 4px;
background:url(../images/ARlogo.png) no-repeat center center; 
}

.navigationMain{
height: 154px;
margin-left: auto;
margin-top: -4px;
position: relative;
width: 665px;
right: 30px;
left: 160px;
}

li{
display: inline;
}

.nav {
position: relative;
top: 70px;
}

.nav li{   
display: block;
float: left;
}

.nav li {
background: url(../images/slash.png) no-repeat;
padding-left: 26px;
}

.nav li:first-child {
background: none;
}

.nav a {
display: block;
text-indent: -9999px;
height: 35px;
width: 150px;
}

#portfolio-link {
background: url(../images/portfolio.png) no-repeat;
}

#about-link {
background: url(../images/about.png) no-repeat;
height: 35px;
width: 115px;
}

#contact-link {
background: url(../images/contact.png)no-repeat;
}

#slash-link{
background: url(../images/slash.png)no-repeat;
}

.aboutlayout{
background: white; /*#ecebeb; */ 
height: 350px;
position: relative;
}

JQuery

$(document).ready(function() {

$('.aboutlayout').hide();

$('#about-link').click(function() {
$('.aboutlayout').slideDown();
})

})

Answer 1

An anchor with an empty href reloads the current page when you click it.
You should use a hash, and preferably prevent the default action in the event handler, otherwise the page will always reload, and the animations are not shown.

change

<a href="" id="about-link">About</a>

to

<a href="#" id="about-link">About</a>

and do

$('#about-link').click(function(e) {
    e.preventDefault();
    $('.aboutlayout').slideDown();
});