Weird jQuery and HTML implementation

Question

Okay, so what I'm trying to do is have a user click on a link and have a box slide down ontop.
I have the main things done, but the box seems to be a bit weird. If you click on the specified box (in this case, "About the Blogger"), the box slides down. Then if you click anywhere in the area below the navigation, the box also slides down. How do I stop this?
Relevant coding:

CSS:

.panel_button {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;

}

.panel_button a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
position: relative;
top: -160px;
font-size: 255%;
width: 50%;
height: 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: 700px;
width: 100%;
position: absolute;
z-index: -1;
}

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">and jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhere </div> 
  <div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">Hide</a> </div> 
</div></div>

I honestly doubt it's the jQuery issue, but I'm not familiar with jQuery, so why not:

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


    }); 

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


   });  


});

If you want to look at it, my website is at Niu-Niu.org .

Thank you for looking!

Answer 1

Because its also div.panel_button . You should redefine your selector in the jQuery.

Answer 2

use the actual anchor element to trigger the animation instead of the whole panel :

$('#panel').click

instead of

$("div.panel_button").click

a bit off topic, but you should improve your animation by stoping any previous animations in progress :

$("div#panel").stop().animate(/* ... */);

Answer 3

When you click an element, your click is propagated (bubbled) up the DOM tree, so all parents receive the click event as well, and all their handlers are executed.

This presents a problem when you have a clickable element inside another clickable element, since the inner element will handle the click event but then pass the event on to its parent, which will then also handle it.

The usual way to fix this is to prevent the default behavior whenever you catch a click event, like this:

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

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

Answer 4

div.panel_button is twice as big as the embedded a . This should fix the problem:

$("div.panel_button a").click(function(){

Answer 5

(update) aww. the selector is the main problem. use $("#panel")

the problem is the bouncing effect.

this may solve your problem:

 var show = false;

$("div.panel_button").click(function(e){
   if (show) return;
    $("div#panel").animate({
        height: "430px"
    })
    .animate({
        height: "400px"
    }, "fast");

 show = true;
 e.preventDefault();

});

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

show = false;
    e.preventDefault();
}); 

If you want to use more creative easing effect you should use the .slideDown() function with easing argument.

Easing The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

For a great easing extension visit this site.

according to other asnwers, you should also use event.preventDefault to stop the event bubbling through the DOM.