crazy jquery?

**frenkytribe** · 02-15-2013, 12:11 PM

Hello to all (sorry for my bad english, I'm Italian),
I write on the forum because I'm literally staggering!
I have a page in a sliding div in jquery running at 100% which also has a small arrow that turns on the basis of whether it is open or closed.

Always on the same page I added another sliding div that appear to work but this arrow does not rotate! The code seems more than fair ... You can give him a 'look you?

Code:

<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> 
<!-- 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> 
</body> 
</html>

Again, this is apparently working but not turning the arrow as in the first .. What is wrong? I know that I could leave the names of some of the same classes but to make you understand better I called everyone in a different way.
I forgot to say that if the link instead of the second imposed as a class "show_hide" the arrow works, but I rightly opens and closes the first div and not the second.

**haulin** · 02-19-2013, 06:10 AM

That seems to be just a CSS issue. In your styles, you define .active sooner than .menu, so .menu has precedence. Either define .menu first or define .active more specific like .menu.active

Thread: crazy jquery?

Thread Tools

Display

crazy jquery?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions