title: Changing span text to hide/show on jQuery toggle()
body: <p>strong textI'm trying to Hide/Show a div by clicking on Span element. I'm trying to change the text inside the span to toggle between hide(when element is showing) and show(when element is hidden). i belie I got on a good start but I'm now stuck in getting the jQuery script to work. Any help would be appreciated.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/3AnPX/" rel="nofollow">jsFiddle</a>: <a href="http://jsfiddle.net/3AnPX/" rel="nofollow">http://jsfiddle.net/3AnPX/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span class="help_target"&gt;Open&lt;/span&gt;
  &lt;div class="help_content"&gt;Content 1&lt;/div&gt;
  
  &lt;span class="help_target"&gt;Open&lt;/span&gt;
  &lt;div class="help_content"&gt;Content 2&lt;/div&gt;
  
  &lt;span class="help_target"&gt;Open&lt;/span&gt;
  &lt;div class="help_content"&gt;Content 3&lt;/div&gt;
  
  &lt;span class="help_target"&gt;Open&lt;/span&gt;
  &lt;div class="help_content"&gt;Content 4&lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(".help_content").hide();
  
  $(".help_target").click(function () {
      $(this).next('.help_content').toggle();
      $(this).toggle(function () {
          $(this).text('Open');
      }, function() {
          $(this).text('Close');
      });
  });
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>Trying to implement this on my actual website, but it's not working:  <a href="http://jsfiddle.net/PzkxA/" rel="nofollow">http://jsfiddle.net/PzkxA/</a></p>