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?
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.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>
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.
Reply With Quote
Bookmarks