title: Changing Text Using jQuery
body: <p>What I'm trying to do is add a <code>[+]</code> or <code>[-]</code> sign to an expandable heading so that once the user clicks on the heading, its content part will be shown and its sign part will change from <code>+</code> to <code>-</code> and vice versa. Since there are multiple headings, I used jQuery's  <code>next()</code>. So far the <code>.content</code> toggling works well, but for some reason the sign is not changing.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
    jQuery(".content").hide();
  
    jQuery(".heading").click(function()
    {
      jQuery(this).next(".content").toggle();
      if (jQuery(this).next(".sign").text()=="[+]")
      {jQuery(this).next(".sign").text("[-]");}
      else
      {jQuery(this).next(".sign").text("[+]");}
  
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>for (int i = 0; i &lt; nodes.getLength(); i++)
   {
     Element element = (Element) nodes.item(i);
     NodeList title = element.getElementsByTagName("Title");
     Element ttl = (Element) title.item(0);
     String linkTitle = getCharacterDataFromElement(ttl);
     htmlReturn += "&lt;a href='#' class='heading'&gt;&lt;h4&gt;" + linkTitle + " &lt;span class='sign'&gt;[+]&lt;/span&gt;&lt;/h4&gt;&lt;/a&gt;";
     htmlReturn += "&lt;div class='content'&gt;";
  
      ...
  
  }
  </code></pre>