Jquery dynamic plus/minus symbol toggle

Question

I'm using a jquery toggle script. I would really like a plus (+) sign to show in the heading when the toggle hasn't been opened, and a minus (-) symbol for when it has been.

The reason I'm not just using the script below is because the current script I'm using automatically closes an opened toggle when another toggle is clicked - which is a feature I really like! :)

$('#toggle-view li').click(function () {

    var text = $(this).children('p');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).children('span').html('-');     
    } else {
        text.slideUp('200');
        $(this).children('span').html('+');     
    }   
});
});

script I am using:

$(document).ready(function(){
$(".parents-toggle > div").click(function () {
$(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".iteminfo-toggle").slideToggle();
});
});

my html

<div class="parents-toggle">
<div class="itemheading2_toggle">Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

Anyone have any ideas how to combine the plus/minus symbols to display in the current script I am using? ^^;

Here's an example of the minus/plus toggle script: http://www.queness.com/resources/html/toggle/index.html

Answer 1

How about this?

html: add a span for the symbol

<div class="parents-toggle">
    <div class="itemheading2_toggle"><span class="symbol">-</span>Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

js: toggle +/- symbol

$(".parents-toggle > div").click(function () {
    $(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
    $(this).siblings(".iteminfo-toggle").slideToggle();

    // toggle open/close symbol
    if($('.itemheading2_toggle span').text() == '-'){
        $('.itemheading2_toggle span').text('+');   
    } else {
        $('.itemheading2_toggle span').text('-');
    }
});

Demo: http://jsfiddle.net/bg7tw/

Answer 2

Here's how I'd do it:

var parent = $('#toggle-view'), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

// bind the click to all headers
$('li h3', parent).click(function() {

    // get the li that this header belongs to
    var li = $(this).closest('li');

    // check to see if this li is not already being displayed
    if (!$('p', li).is(':visible'))
    {
        // loop on all the li elements
        $('li', parent).each(function() {

            // slide up the element and set it's marker to '+' 
            $('p', $(this)).slideUp(delay);
            $('span', $(this)).text('+');
        });

        // display the current li with a '-' marker
        $('p', li).slideDown(delay);
        $('span', li).text('-');
    }
});

Check out http://jsfiddle.net/v9Evw/ to see it in action.

---

To hide on click if it's currently visible, add an else to the click method:

    else {
        $('p', li).slideUp(delay);
        $('span', li).text('+');  
    }

Check out http://jsfiddle.net/v9Evw/1/ to see it with this update.