Jquery toggle span text in trigger
<p>I'm so close to figuring this out, i think. I'm new to javascript, but here's my situation.</p>

<p>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. </p>

<p>The problem i'm running into is the span changes for both headers, instead of just the one being clicked. </p>

<pre><code>    &lt;div&gt;
    &lt;h3 class = "trigger"&gt;&lt;span&gt;+&lt;/span&gt;Heading 1&lt;/h3&gt;
    &lt;ul class = "toggle"&gt;
        &lt;li&gt;Line One&lt;/li&gt;
        &lt;li&gt;Line Two&lt;/li&gt;
        &lt;li&gt;Line Three&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;h3 class = "trigger"&gt;&lt;span&gt;+&lt;/span&gt;Heading 2&lt;/h3&gt;
    &lt;ul class = "toggle"&gt;
        &lt;li&gt;Line One&lt;/li&gt;
        &lt;li&gt;Line Two&lt;/li&gt;
        &lt;li&gt;Line Three&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And here is the accompanying javascript for it. </p>

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

<p>Here is a <a href="http://jsfiddle.net/toddj/sWvbq/3/" rel="nofollow">jsfiddle</a></p>
