Dayo Posted December 4, 2010 Share Posted December 4, 2010 right i have this script <!DOCTYPE html> <html> <head> <style> p { width:400px; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div> </div> </div> <script> $(".inner").hover(function () { $(".text").slideToggle("slow"); $(".ammount").slideToggle("slow"); }); </script> </body> </html> what i want it to do is only toggle the slide on the div i hover over and not all 3 i have tryed for a while any help would be appreciated! Quote Link to comment Share on other sites More sharing options...
Dave Posted December 4, 2010 Share Posted December 4, 2010 It works like this.. Could be a bit more efficient but I've never used slideToggle so personally I'd do it like this. <!DOCTYPE html> <html> <head> <style> p { width:400px; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:leftl">x2</div> </div> </div> <script> $(".inner").hover(function () { if($(this).children('.text').css('display') == 'none') { $(this).children('.text').slideDown("slow"); $(this).children('.text').slideDown("slow"); } else { $(this).children('.text').slideUp("slow"); $(this).children('.text').slideUp("slow"); } }); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Dayo Posted December 4, 2010 Author Share Posted December 4, 2010 Thank you, i will have to look more deeply into JQuery :D Quote Link to comment Share on other sites More sharing options...
Dave Posted December 4, 2010 Share Posted December 4, 2010 Thank you, i will have to look more deeply into JQuery :D If you need any help just ask! I'm not that great at jQuery but I've written some advancedish stuff with it. Quote Link to comment Share on other sites More sharing options...
Dayo Posted December 4, 2010 Author Share Posted December 4, 2010 just done a quick fix using children and probly made it more efficiant the problem was you could get the grey area that slides down stay at the bottom once you move the mouse away (some thing i didnt want :D) Thanks for pointing out children <!DOCTYPE html> <html> <head> <style> p { width:400px; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> </head> <body> <div align="center"> <div style="width:585px;"> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> <div style="width:125px; height:125px; padding:5px; margin:5px; float:left; background-color:#999;"> <div class="inner" style="width:125px; height:125px; background-color:#F00; overflow:hidden;"> <div class="text" style="display:none; margin-top:100px; height:25px; width:125px; text-align:center; background-color:#ccc; float:leftl"></div> <div class="ammount" style=" height:25px; width:25px; background-color:#ccc; padding:3px; text-align:center; float:left">x2</div> </div> </div> </div> </div> <script> $(".inner").hover(function () { $(this).children(".text").slideToggle("slow"); $(this).children(".ammount").slideToggle("slow"); }); /* $(".inner").hover(function () { if($(this).children('.text').css('display') == 'none') { $(this).children('.text').slideDown("slow"); $(this).children('.text').slideDown("slow"); } else { $(this).children('.text').slideUp("slow"); $(this).children('.text').slideUp("slow"); } });*/ </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Djkanna Posted December 4, 2010 Share Posted December 4, 2010 Ever thought about $(this + '.text') ;) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.