jquery append and remove that

Question

I like to have a h3 title with a little caracter that say "expand me"

it will look like that : category xyz [+]

i like a function in jquery to chage/remove the + to minus when click.. i know how to append text to string but not how to remove it or just a part..

if you have a better approch feel free to tell me.. thanks !

---

note : implement the .remplace function... but dont work as expected you can see it here ... the problem i used jquery 1.4 switch to 1.4.3 now it work !

Answer 1

Much easier just to toggle the visibility of existing elements.

HTML

<h3>Category XYZ
   <span id="toggle">
      <a href="#" class="expand" title="expand me">[+]</a>
      <a href="#" class="hide" title="hide me">[-]</a>
   </span>
</h3>
<div id="toggleContent">This is the text of category XYZ</div>

Javascript

$("span#toggle a").click(function() {
   $("div#toggleContent").toggle();
   $("span#toggle a").toggle();
});

CSS

div#toggleContent { display: none; }
span#toggle a.hide { display: none; }

JSFiddle that you can try this out on.

Answer 2

Well, if you must have the +/- in the same h3 as the rest of the header text, I'd do it with a regex replace. Here's how I'd do it then:

$("body").delegate("#header a", "click", function(eventObj) {
    if ($(this).text().match(/\+/)) {
        $(this).text($(this).text().replace(/\+/, "-"));
    } else {
        $(this).text($(this).text().replace(/-/, "+"));
    }
});

You can see this working over at jsFiddle.