Ciao a tutti,
scrivo sul forum perché sto letteralmente sfasando!
ho in una pagina uno sliding div in jquery funzionante al 100% che ha anche una freccetta che si gira in base se è aperto o chiuso.

Sempre nella stessa pagina ho inserito un altro sliding div che apparentemente funziona ma questa freccetta non gira!! Il codice mi sembra più che corretto... Potete dargli un' occhiata voi?

Codice PHP:
<html>
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#panel").show();
    $(".show_hide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("lactive"); return false;
    });
    
     
});

$(document).ready(function(){
    $("#menu").show();
    $(".menu").click(function(){
        $("#menu").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<style type="text/css" rel="stylesheet">
.sli {
    margin: 0;
    padding: 0;
    background: url(../img/btn-slide.gif) no-repeat center top;
}    
.slide {
    margin: 0;
    padding: 0;
    background: url(../img/btn-slide.gif) no-repeat center top;
}
.show_hide {
    background: url(../img/up.png) no-repeat 120px 10px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background: url(../img/down.png) no-repeat 120px 10px;
}
.lactive {
    background: url(../img/down.png) no-repeat 120px 10px;
}
#menu {
    height:120px;
    width: 144px;
    background-color: #e7e7e7;
    color: green;
    display: none;
    border: solid 1px #000;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    }
.menu {
    background: url(../img/up.png) no-repeat 120px 10px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
</style>
</head>
<body>

<p class="slide">
                  <a href="#" class="show_hide" style="text-decoration: none; ">
                     Login
                  </a>
                </p>
<div id="panel"> 
                              Testo qui
                           </div>

<hr>



<p class="sli"><a href="#" class="menu" style="text-decoration: none; ">
                         mos
                          </a></p>
            <div id="menu">
                menu
            </div>
</body>
</html> 
Ripeto, è apparentemente funzionante ma non si gira la freccetta come nel primo.. Cosa c'è di sbagliato? Lo so che potevo anche lasciare il nome di alcune classi uguali ma per farvi capire meglio le ho chiamate ognuno in modo diverso.
EDIT: Dimenticavo di dire che se invece nel link del secondo imposto come classe "show_hide" la freccetta funziona, ma giustamente mi apre e chiude il primo div e non il secondo.