ansaurus

Question

Answer 1

+2 A:

I thin this is what you're after:

$('li').hover(function() {
  $(this).children('.subtext').stop(true, true).slideToggle();           
});

If you want to hide/show the class="subtext" element, you need to find it within the <li> you're hovering over. This does that, and will slide down on hover, up on mouse out. In this example, this refers to the li DOM element, and $(this) refers to the li jQuery object.

Nick Craver 2010-03-24 22:08:15

Thanks will try

Elliott 2010-03-24 22:17:07

@Elliott - I you want it hidden initially, change it's CSS to this: `.subtext { padding-top:15px; background-color: #6AA63B; display: none; }`

Nick Craver 2010-03-24 22:19:40

Its not shown on page load anyway without the display none?

Elliott 2010-03-24 22:20:26

Elliott - What behavior do you want? shown initially, hidden, show, then hidden on hover?....can you describe a bit what should be hidden/shown initially, then what should happen? jQuery can do whatever you want, I'm just not sure exactly what you're after.

Nick Craver 2010-03-24 22:30:09

I think I have sorted it, removed "overflow: hidden;" from my css seems to fix it

Elliott 2010-03-24 22:31:38

Answer 2

+2 A:

When you use this you are referencing the element that the event was bound to. In this case the LI element. You want to hide and show the P element only. Like this.

HTML

<ul>  
   <li class="hover">  
        <p><a href="#">Hover</a></p>  
        <p class="subtext" style="display: none;">Show More</p>  
    </li>  
</ul>

jQuery

$(document).ready(function() {
    $('li').hover(function() {
        $(this).children("p.subtext").slideDown("slow");
    },
    function() {
        $(this).children("p.subtext").slideUp("fast");
    });
});

Dustin Laine 2010-03-24 22:11:45

Thanks but it still doesnt seem to work, I have added css incase anything wrong in that.

Elliott 2010-03-24 22:16:28

Check my update

Dustin Laine 2010-03-24 22:17:43

Still no luck, thanks again

Elliott 2010-03-24 22:19:28

Maybe I am confused on what you are trying to do. What I posted, will show the list item and the "Hover" text. When you hover over it slides down the "Show More" text and when you unhover it slides up that text.

Dustin Laine 2010-03-24 22:20:37

Yes thats what it should do, I think I messed up some where in my code

Elliott 2010-03-24 22:25:19

Thanks got it :)

Elliott 2010-03-24 22:34:14

Answer 3

A:

firstly you should put the order

 jQuery.noConflict();

then change $ with JQuery example:

<script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('somei

d').hide();

good links at this topic: http://docs.jquery.com/Using_jQuery_with_Other_Libraries http://api.jquery.com/jQuery.noConflict/ with my best wishes

2010-03-24 22:26:57

Changing libraries to do something jQuery does fine is not a good solution...

Nick Craver 2010-03-24 22:28:57

ansaurus

tags:

views:

answers:

jquery 'this' confusion

related questions