jQuery toggleClass don't working on second div

Question

I want to sorry for my bad english becouse I'm italian. I have 1 page html with 2 jQuery slideToggle and the relative toggleClass for change "Show" and "Hide" in the button. In the first div toggleClass work correctly, but in the second div toggleClass not working. Please read my code.

<html> 
<head> 
<script src="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; 
    }); 
    $("#menu").show(); 
    $(".menu").click(function(){ 
        $("#menu").slideToggle("slow"); 
        $(".menu").toggleClass("active"); return false;
    }); 
}); 
</script> 
<style type="text/css" rel="stylesheet"> 
.sli { 
    margin: 0; 
    padding: 0; 
    background: url(btn-slide.gif) no-repeat center top; 
}     
.slide { 
    margin: 0; 
    padding: 0; 
    background: url(btn-slide.gif) no-repeat center top; 
} 
.show_hide { 
    background: url(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(down.png) no-repeat 120px 10px; 
} 
.lactive { 
    background: url(down.png) no-repeat 120px 10px; 
} 
.menu { 
    background: url(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> 
<!-- primo FUNZIONANTE --> 
<p class="slide"> 
                  <a href="#" class="show_hide" style="text-decoration: none; "> 
                     Login 
                  </a> 
                </p> 
<div id="panel"> <!-- # Pannello nascondibile --> 
                              Testo qui 
                           </div> 

<hr> 

<!-- secondo NON FUNZIONANTE --> 
<p class="sli"><a href="#" class="menu" style="text-decoration: none; "> 
                         mos 
                          </a></p> 
            <div id="menu"> 
                menu 
            </div> 
            <hr>
</body>

What can I do?

hohner hohner · Accepted Answer · 2013-02-16T13:47:58

I'm assuming that you want the second element to behave in the same way as the first. If this is correct, you need to change your second element's click call to:

$(".menu").click(function(){ 
    $("#menu").slideToggle("slow"); 
    $(this).toggleClass("active");
});

jsFiddle here. You also need to make sure your CSS is not getting overriden. If this is not what you want, please elaborate your question...

jQuery toggleClass don't working on second div

1 Answers