CODEWITHSUNDEEP
jquery
menardmam
menardmam

Reputation: 9986

jquery append and remove that

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 !

Upvotes: 3

Views: 294

Answers (7)

Alex
Alex

Reputation: 65972

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.

Upvotes: 2

BrunoLM
BrunoLM

Reputation: 100361

If you want to expand/collapse I suggest you do make a structure similar to this:

See this example on jsFiddle.

Each a is related to one div. The href is the selector for the content div.

<div id="container">
    <ul>
        <li>Category 01 <a href="#cat01">[+]</a></li>
        <li>Category 02 <a href="#cat02">[+]</a></li>
        <li>Category 03 <a href="#cat03">[+]</a></li>
    </ul>
    <br />
    <div id="categories">
        <div id="cat01">content 01</div>
        <div id="cat02">content 02</div>
        <div id="cat03">content 03</div>
    </div>
</div>

Here I'm using toggle, each time you click the element the function index increases by 1 until it reach the max, then it go back to 0. So with two functions it will alternate between them in each click. By doing so you can toggle [-] and [+]. This will only work properly assuming all categories starts with the same state. If they are not necessarily collapsed at first run you will have to modify this function to check the a content for [+] or [-]. 

$("#container ul > li > a").toggle(function (e) {
    var $this = $(this);
    $this.text("[-]"); // change the text
    // select content div using href as the selector
    $($this.attr("href")).css("display", "block");
    // prevent any other behavior
    e.preventDefault();
},
function (e) {
    var $this = $(this);
    $(this).text("[+]"); // switch to collapsed view
    $($this.attr("href")).css("display", null);
    e.preventDefault();
});

Upvotes: 0

Damo
Damo

Reputation: 11550

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.

Upvotes: 3

generalhenry
generalhenry

Reputation: 17319

put the characters in a spans something like

<span class=expandPlus>[+]</span>

then you can use something like

$("h3").click(function() {
  $(this).children('expandPlus').html('[-]')
  .
  .
  .
});

Upvotes: 0

Pointy
Pointy

Reputation: 413826

Put the little character in it's very own <span>, and give that <span> a "class" or "id" value. Then you can use the class or id from Javascript to find that part of the text specifically and change it. This will have the added advantage of making that little bit of text, so meaningless among the rest of your page content, all smug and haughty in its linguistic intelligibility, well that little character will just be special. Its quality of life will be improved dramatically, and that sort of thing really comes through on a subliminal level to your users.

Upvotes: 0

jeremysawesome
jeremysawesome

Reputation: 7254

You can use the jQuery html or text functions to accomplish this:

$("#your-selector").text("category xyz[-]");

Upvotes: 0

ajacian81
ajacian81

Reputation: 7579

$("#idOfObject").html("[-]");

don't shoot me if I'm wrong, going by memory :)

Upvotes: 0

Related Questions