Question

I’m so close to figuring this out, i think. I’m new to javascript, but here’s my situation.

I’ve got some lists hidden by default. Clicking on the headers displays the lists. I want the span in the header to change from ‘+’ to ‘-‘ to hide and show respectively.

The problem i’m running into is the span changes for both headers, instead of just the one being clicked.

    <div>
    <h3 class = "trigger"><span>+</span>Heading 1</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>
<div>
    <h3 class = "trigger"><span>+</span>Heading 2</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>

And here is the accompanying javascript for it.

$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle(function(){
    $('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

Here is a jsfiddle

Answer 1

Try this:

$(".trigger").click(function(){
    var trigger = $(this);
    $(this).next(".toggle").slideToggle(function(){
    trigger.children('span').text(
        $('.toggle').is(':visible') ? '-' : '+');
    });
});

​