Question

This should be simple, but I can’t get it to work when the ‘trigger’ is an anchor inside the li. I want the anchor, when clicked to toggle the appropriate nested ul.
Here is the HTML:

<ul id="specs">
    <li>top level li</li>
    <li>top level li</li>
    <li>li to trigger nested list <a class="trigger" href="firstTrigger">first trigger</a> or <a class="trigger" href="secondTrigger">second trigger</a>.
        <ul id="hiddenList1">
            <li class="title">Title 1</li>
            <li>something</li>
            <li>something</li>
        </ul>
        <ul id="hiddenList2">
            <li class="title">Title 2</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </li>
</ul>

I would like to do it so I don’t have to write a function for reach, to make it more global. Here is what I’ve tried but I come up with it either not working or adding the # to the url

$(function() {
    $('.trigger').click(function() {
        $(this).attr('href').toggle(slow);
        return false;
    )};
});

thank you very much for any help.

Answer 1

Here’s an attempted fix:

<ul id="specs">
    <li>top level li</li>
    <li>top level li</li>
    <li>li to trigger nested list <a class="trigger" href="firstTrigger">first trigger</a> or <a class="trigger" href="secondTrigger">second trigger</a>.
        <ul id="firstTrigger">
            <li class="title">Title 1</li>
            <li>something</li>
            <li>something</li>
        </ul>
        <ul id="secondTrigger">
            <li class="title">Title 2</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </li>
</ul>

$(function() {
    $('.trigger').click(function() {
        $("'#" + $(this).attr('href')).toggle('slow');
        return false;
    )};
});

http://jsfiddle.net/kcq7K/2/

Slightly modified version that doesn’t rely on ids rather position:

$('.trigger').click(function() {
    $(this).siblings('ul').eq($(this).index()).toggle('slow');
    return false;
});

http://jsfiddle.net/kcq7K/3/