how to separate two click function?

i try to separate this two function. The first function is to open a panel, and the second function to open show/hide object inside the panel, but somehow when i click the show/hide button the panel close itself. click HERE to see the demo

here is the javascript i used

$(document).ready(function(){

            $("#dock li").click(function(){
            if($(this).find("ul").css("left") != "40px")    {
            $(this).find("ul").animate({left:"40px"}, 200); } else {
            $(this).find("ul").animate({left:"-370px"}, 200); } 
            });

            $(".slidingDiv").hide();
            $(".show_hide").show();

            $('.show_hide').click(function(){
            $(".slidingDiv").slideToggle();
            });

            $(".slidingDiv1").hide();
            $("开发者_如何学Go.show_hide1").show();

            $('.show_hide1').click(function(){
            $(".slidingDiv1").slideToggle();
            });

        });

can anyone help me please?

Your second click function should be:

$('.show_hide1').click(function(event){
    $(".slidingDiv1").slideToggle();
    event.stopPropagation();
});

For more info see http://api.jquery.com/event.stopPropagation/