jQuery Navigation Issues
<p>Okay, this will be a bit hard to explain, but I'll try my best.<br>
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. <br>
That probably did not make sense. If you go to my website <a href="http://www.niu-niu.org/" rel="nofollow">Niu-Niu.org</a>, then click on the navigation button that says "About the Blogger", you'll see what happens. </p>

<p>
Here is the relevant coding : </p>

<p>Header.php</p>

<pre><code>    &lt;div id="container"&gt;

&lt;ul id="navigation1"&gt;
&lt;li&gt;&lt;a href="http://www.niu-niu.org/"&gt;NIU&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="navigation2"&gt;
&lt;li&gt;&lt;a href="http://www.spidur.tumblr.com"&gt;SKETCH/&lt;br&gt;PHOTO&lt;br&gt;BLOG&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="panel_button" style="display: visible;"&gt;&lt;a href="#panel"&gt;ABOUT&lt;br&gt;THE&lt;br&gt;BLOGGER&lt;/a&gt;&lt;/div&gt; 

&lt;ul id="navigation4"&gt;
&lt;li&gt;&lt;a href="http://www.niu-niu.org/about"&gt;LINKS&lt;br&gt;OUT&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;


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

<p>Here is the jQuery:</p>

<pre><code>  $(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");


   });  

});
</code></pre>

<p>And here is the CSS:</p>

<pre><code>    #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%; }

.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;
}
</code></pre>
