Using JQuery selectors and “this” for dynamic elements

Question

I have a page with a ton of documents for a client who would like users to be able to click on each article/project listed on the page, and for a small details pane to open beneath it reveling the content.

I know this is fairly easy to do, particularly with JQuery, but I am not well-versed in the language and trying to take a stab at this kind of dynamic functionality. There are well over 50 documents, hence the reason for using "this" and trying to keep things dynamic rather than explicitly calling EACH of the 50 elements (and also bogging down load times).

Here is my HTML (I've only included ONE of the elements in the list)...

    <ul class="paging" id="paging">
                <li><a href="">Economics of Ethanol and Bio-butanol as Gasoline Blendstocks<br />
                <strong>Categories:</strong> Oxygenated Fuels Issues, Bio-fuel Economics, Blendstock Valuation, Refining Economics, Refinery Modeling</a>
                <ul style="background:#f8f8f8; width:500px; height:200px;"><li>Here is the text that should appear beneath woot</li></ul>

                </li>

And here is my JQuery bit...

    <script type="text/javascript">
        $(document).ready(function() {

            $('ul.paging > li > ul').hide();

            $('ul.paging > li').click(function() {

                $(this > ul).slideToggle();

            });
        });


    </script>

My elements is being hidden correctly, so I'm assuming my selectors are ok? Anyhow, there's no working functionality with the roll-out. Any thoughts?

Thank you, all help is very appreciated! Like I said, very new to this. :) Thanks again!

Answer 1

The value of this is a DOM element. You need to use it as the base for jQuery's DOM traversal methods, like .children() .

$(this).children("ul").slideToggle();

Answer 2

$(this > ul) should look like $('ul', this)

Or

$(this).find('ul').slideToggle();

Answer 3

The selector here is likely your problem:

$(this > ul).slideToggle();

You might best use this:

$(this).find('ul').slideToggle();

I would also suggest making CSS style for the ul 's hidden by default, that way they wouldn't potentially flash on the screen before the document ready event.