Question

I’m trying to change a ‘+’ into ‘-‘ when toggling elements. I’ve tried a few things but once the symbol changes it won’t toggle back and forth like it should. I’ve searched the other posts but they don’t work for my bit of code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$("trace_dump").hide();

//Slide up and down on hover
$("h3").click(function(){
    $(this).next("trace_dump").slideToggle("slow");
    $(this).text($('span').text() == '+' ? '-' : '+');
});
});
</script>

…and here’s the html:

<h3><span>+</span>print_r()</h3>
<trace_dump>
    print_r($e);
</trace_dump>
<h3><span>+</span>var_dump()</h3>
<trace_dump>
    var_dump($e);
</trace_dump>

Can I get some ideas?

Answer 1

In this line:

    $(this).text($('span').text() == '+' ? '-' : '+');

this is refering to the h3 and not the span like I think you intended.

Try this:

$(this).find('span').text($(this).find('span').text()=='+'?'-':'+');