Including a plus+/minus- sign into a simple toggle menu jquery

Question

I have the following html code:

            <div class="slide-button" data-content="panel1">
            <p><span id="panel-icon">+</span>Test1</p>
            </div>  
            <div id="panel1" style="display: none">
            <p> Test jquery menu1 </p>
            </div>


            <div class="slide-button" data-content="panel2">
            <p><span id="panel-icon">+</span>Test2</p>
            </div>  
            <div id="panel2" style="display: none">
            <p> Test jquery menu2 </p>
            </div>  

and the following jquery code:

$(".slide-button").on('click', function(){
    var panelId = $(this).attr('data-content');
    $('#'+panelId).toggle(500);
    });

The toggle itself works perfectly.

However, I also want to include a plus and minus sign as you can see from my span-tag in the html code.

What do I have to add to my existing jquery code in order to change the + and - sign when the user clicks on the link?

Thank you for any help :-)

Answer 1

if you change it to a class

<div class="slide-button" data-content="panel1">
     <p><span class="panel-icon">+</span>Test1</p>
</div>  
<div id="panel1" style="display: none">
    <p> Test jquery menu1 </p>
</div>

you could do

$(".slide-button").on('click', function(){
    var panelId = $(this).attr('data-content');
    $('#'+panelId).toggle(500);

    $(this).find('.panel-icon').text(function(_, txt) {
        return txt === "+" ? "-" : "+";
    });
});

FIDDLE