How to show/add/modify text in a string with jquery

Question

I have a title and a unorder list

<h2> here is some interesting links </h2>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

what I like is to add a [+] at the end of the  tag, and hide the following

then on click on h2, show it.... BUT i need to mak e the [+] become a [-]

what is the best way to change that ?

it will look like :

closed : title [+]

open : title [-]

• -link1
• -link2
• -link3

Answer 1

Here is my fast improvisation. It should work.

HTML:

<h2>
    here is some interesting links
    <span class="toggle" data-target="list1">-</span>
</h2>
<ul id="list1">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

jQuery:

$(".toggle").on("click", function() {
    var target = $(this).text(function(i, val) {
        return val == "+" ? "-" : "+";
    }).data("target");
    $("#" + target).toggle();
});

DEMO: http://jsfiddle.net/L3jep/

Answer 2

Assuming no changes to your current HTML, and all modifications through jQuery:

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(){
                return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JS Fiddle demo.

---

Edited to explain this part of the above code:

 return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';

This is a ternary operator, it evaluates a condition (return that.text().indexOf('+') !== -1) for being true, or false. Following the ? is the 'if-true' response, and following the : is the 'if-false' response.

So, the condition assesses whether or not the + character is found within the string returned from the text() of the current element. We're comparing the result to -1 because indexOf() returns the index of the found substring. Because the substring can be found at 0 (the beginning of the string), indexOf() returns -1 when the string is not found. Therefore if the + is found (so the returned result will not be equal to -1) within the text of the span element the text is changed to [-], whereas if the + is found the text will be changed to [-].

The return statement simply returns the changed-text to the text() method.

---

Updated to amend the text() method's function, and take advantage of the fact that the text of the element is available as the second parameter in the function:

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(i,t){
                return t.indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });​

JS Fiddle demo.

References:

• closest().
• html().
• next().
• on().
• JavaScript ternary operator.
• text().
• toggle().

Answer 3

Assuming you have Markup like this

<h2> here is some interesting links </h2>
<a  class="aExpand" href="#">+</a>
 <ul class="sub" style="display:none;">
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

This script will do it

$(function(){
     $(".aExpand").click(function(e){
       var item=$(this);  
        if(item.next("ul").is(":visible"))
        {         
          item.text("+").next("ul").hide();

        }
        else
        {           
            item.text("-").next("ul").show();
        }

    });    
});

working sample : http://jsfiddle.net/BqKn5/8/

Answer 4

my final code base on your help and from here : How do I do string replace in JavaScript to convert ‘9.61’ to ‘9:61’?

<script type="text/javascript">
$(function(){

    $('.bulletlisttohide').hide();

    $(".plus").click( function () {
        $(this).next('.bulletlisttohide').slideToggle(500, function (){
            if ($(this).is(":visible")) { $(this).prev('.plus').html(function(i, val) { return val.replace('[+]', '[-]'); }); }
            else { $(this).prev('.plus').html(function(i, val) { return val.replace('[-]', '[+]'); }); }
        });

        return false;
    });
})
</script>