title: Jquery toggle text on click
body: <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>