Hi all,

I've been using jQuery for a few months now and I've built a simple
little slide down link list that looks like:

jQuery bit:
var mouseDelay = 250;
$(document).ready(function(){
        $('#qlink_search p').hide();
        $('#qlink_search h2').mouseover(function() {
                timeMain=setTimeout(function(){$('#qlink_search
p').slideToggle('fast');}, mouseDelay);
        });
        $('#qlink_search h2').mouseout(function() {
                clearTimeout(timeMain);
        });
});

html bit
<div id="qlinks">
<div id="qlink_search">
<h2 class="qlink_header">Search Engines</h2>
<p class="qlink_item first"><a href="http://google.com";
target="_blank">Google</a></p>
<p class="qlink_item"><a href="http://clusty.com";
target="_blank">Clusty</a></p>
<p class="qlink_item"><a href="http://msn.com"; target="_blank">MSN</
a></p>
<p class="qlink_item"><a href="http://altavista.com";
target="_blank">Alta Vista</a></p>
<p class="qlink_item"><a href="http://yahoo.com"; target="_blank">Yahoo!
</a></p>
<p class="qlink_item last"><a href="http://metacrawler.com";
target="_blank">Metacrawler</a></p>
</div>
</div>

The links start out hidden and when you mouse over the h2 section
heading the items toggle slide visibility. Pretty easy and it works
fine.

My problem comes up as the list of sections grows I need to add
another jQuery code block referencing the second section and the third
on and on.

What I'd like to do is something like:
var mouseDelay = 250;
$(document).ready(function(){
        $('#qlinks > div > p').each(function (i) {
                $(this).hide();
        });
        $('#qlinks > div > h2').mouseover(function() {
                timeMain=setTimeout(function(){?????.slideToggle('fast');},
mouseDelay);
        });
        $('#qlinks > div > h2').mouseout(function() {
                clearTimeout(timeMain);
        });
});

Looping over all the sections and using $(this) in some way to select
the correct elements. $(this) for the second selector above will be
the h2 element. My question is: is it possible to reference all the p
elements under $(this) h2? Can $(this) be manipulated to make relative
references? Am I WAY OFF on how to do this and making it more
difficult than it needs to be?

Please help anyone!

Thanks

Reply via email to