全部展开-折叠全部Div样式问题

Question

I am making an FAQ page with the answers collapsed and then a show all and hide all control for the questions/answers.

My problem is that I am using a toggleClass to switch the '+' or '-' sign next to the question but when you click on the 'Show All Answers' or 'Hide All Answers' the class keeps toggling.

I am not a jquery master by any means.

$(document).ready(function() {
$('.showThis').click(function() {

    $(this).next('.answer').slideToggle(500);
    $(this).toggleClass('showMinus');

});
$('#expandAll').click(function() {        
    $('.answer').slideDown();
     $('.showThis').toggleClass('showMinus');    
});
$('#collapseAll').click(function() {        
    $('.answer').slideUp();    
     $('.showThis').toggleClass('showMinus');    
}); }); // end ready

http://jsfiddle.net/ufe73cfb/2/

Answer 1

Try this. Fiddle

$('#expandAll').click(function() {        
    $('.answer').slideDown();
     $('.showThis').addClass('showMinus');    
});
$('#collapseAll').click(function() {        
    $('.answer').slideUp();    
     $('.showThis').removeClass('showMinus');    
});

Answer 2

this will work for you, here is the DEMO

$(document).ready(function() {
    $('.showThis').click(function() {

        $(this).next('.answer').slideToggle(500);
        $(this).toggleClass('showMinus');

    });

    $('#expandAll').click(function() {  debugger;      
        $('.answer').slideDown();
         $('.showThis').addClass('showMinus');    
    });
    $('#collapseAll').click(function() {      debugger;  
        $('.answer').slideUp();    
         $('.showThis').removeClass('showMinus');    
    });
});

Answer 3

You neet addClass and removeClass instead of toggleClass.

$(document).ready(function() {
$('.showThis').click(function() {

    $(this).next('.answer').slideToggle(500);
    $(this).toggleClass('showMinus');

});
$('#expandAll').click(function() {        
    $('.answer').slideDown(500);
    $('.showThis').addClass('showMinus');
});
$('#collapseAll').click(function() {        
    $('.answer').slideUp();    
    $('.showThis').removeClass('showMinus');    
});

})

New fiddle: http://jsfiddle.net/ufe73cfb/6/