Jquery toggle text on click
<p>I have been trying to solve this, i succeeded somewhat but i'm stuck now.</p>

<p>I have this structure:</p>

<pre><code>&lt;h4&gt;title&lt;/h4&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;hr /&gt;
&lt;h4&gt;title&lt;/h4&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;hr /&gt;
&lt;h4&gt;title&lt;/h4&gt;
&lt;p&gt;text&lt;/p&gt;
&lt;hr /&gt;
</code></pre>

<p>What i'm basically trying to accomplish is to toggle the words tonen (meaning open) and verbergen (meaning hide) when slidding the P's up and down. At the moment i append a span with the word tonen and check wether its shown or not.</p>

<p>The content is hidden on load, tonen is shown, but when h4 is clicked, the content is shown but tonen won't change to verbergen. I have read about live and on but don't get it.</p>

<pre><code>&lt;script&gt;
    $(function(){
    $("h4").append("&lt;span&gt; - tonen&lt;/span&gt;");
    $("h4").nextUntil("hr").hide();
    $("h4").click(function () {
        $(this).nextUntil("hr").slideToggle("fast");
        if(span.text() == " - tonen"){
            span.text(" - verbergen");
        } else {
            span.text(" - tonen");
        }
    });
    });
&lt;/script&gt;
</code></pre>
