jQuery Navigation Issues

Okay, this will be a bit hard to explain, but I'll try my best.

So the dilemma is that when I click on a link, the div slides out. But the problem is that when it slides out, the bottom two navigation buttons disappear and the bottom right slides up.

That probably did not make sense. If you go to my website Niu-Niu.org, then click on the navigation button that says "About the Blogger", you'll see what happens.

Here is the relevant coding :

Header.php

    <div id="container">

<ul id="navigation1">
<li><a href="http://www.niu-niu.org/">NIU</a></li>
</ul>

<ul id="navigation2">
<li><a href="http://www.spidur.tumblr.com">SKETCH/<br>PHOTO<br>BLOG</a></li>
</ul>

<div class="panel_button" style="display: visible;"><a href="#panel">ABOUT<br>THE<br>BLOGGER</a></div> 

<ul id="navigation4">
<li><a href="http://www.niu-niu.org/about">LINKS<br>OUT</a></li>
</ul>
</div>


<div id="toppanel"> 
<div id="panel"> 
<div id="panel_contents">
A bunch of panel contents here</div> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">Hide</a> </div> 
</div></div>

Here is the jQuery:

  $(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "430px"
        })
        .animate({
            height: "400px"
        }, "fast");
        $("div.panel_button").toggle();

    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "fast");


   });  

});

And here is the CSS:

    #container {
position: fixed;
width: 48.1%;
top: 20%;
height: 320px; }

#navigation1 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 900%;
text-align: center;
}

#navigation1 a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F58932;
color: #F5ECE6;
display: block;
width: 50%;
height: 160;
text-decoration: none;
}

#navigation1 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}

#navigation2 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
}


#navigation2 a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F59A51;
color: #F5D5C0;
display: block;
width: 50%;
height: 160px;
position: relative;
left:50%;
top: -160px;
text-decoration: none;
}

#navigation2 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}

#navigation3 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
}


#navigation3 a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
width: 50%;
height: 160px;
position: relative;
top: -160px;
text-decoration: none;
}

#navigation3 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}

#navigation4{
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 360%;
}

#navigation4 a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5AD72;
color: #F5C4A4;
display: block;
width: 50%;
height: 160px;
position: relative;
left:50%;
top: -320px;
text-decoration: none;
}

#navigation4 a:hover {
background: #2D2611;
color: #FFFFFF;
text-decoration: none;
}

#wrap {
width: 100%;
height: 100%; 开发者_StackOverflow中文版}

.panel_button1 {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
background-color: #fff;
}

.panel_button {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;
font-size: 255%;
}

.panel_button a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
width: 50%;
height: 160px;
position: relative;
top: -160px;
text-decoration: none;
}

.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}

#toppanel {
margin-top: 0px;
margin-left: 48%;
position: absolute;
width: 48%;
left: 0px;
z-index: 25;
text-align: center;
}

#panel {
width: 100%;
position: relative;
top: 1px;
height: 0px;
margin-left: auto;
margin-right: auto;
z-index: 10;
overflow: hidden;
text-align: left;
}

#panel_contents {
background: #fff;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}

Isn't the toggle() your problem? It is what causing those items to dissapear.

$("div.panel_button").toggle();

when you

 $("div.panel_button").toggle();



<div class="panel_button" style="display: visible;">

is changing to

<div class="panel_button" style="display: none;"> 

that is the problem

learn more about toggle()

http://api.jquery.com/toggle/