Collapsible List with + and - sign is not working

Question

Here is the Script i have written to handle it but for some reason + and - swapping is not happening

$('.showCheckbox').click(function(e) {
    var dynamicBox = $(this).attr('val');
    var collapseSign = $(this).attr('id');
    $('#'+dynamicBox).slideToggle();
    $('#'+dynamicBox+collapseSign).html(function(_, text){
        return text === '+' ? '−' : '+';
    });
});

You can find Fiddle here http://jsfiddle.net/7Gt4L/ Please help!

Answer 1

Change:

$('#'+dynamicBox+collapseSign).html(function(_, text){
    return text === '+' ? '−' : '+';
});

to:

$('#'+collapseSign).html(function(_, text){
    return text === '+' ? '−' : '+';
});

This will use the ID of the collapse sign clicked to change the text.

Fiddle

Answer 2

I believe the collapseSign portion of your selector should be a string. Otherwise you will be trying to match something similar to #partnerspartnerscollapseSign , which doesn't exist:

$('.showCheckbox').click(function(e) {
    var dynamicBox = $(this).attr('val');
    $('#'+dynamicBox).slideToggle();
    $('#'+dynamicBox+'collapseSign').html(function(_, text){
        return text === '+' ? '−' : '+';
    });
});

JSFiddle