Conditional Toggle of Class using JQUERY

Question

$('.showall').css("cursor","pointer").click(function() {

  $('.value-container').toggle();

  $('.dim-header').toggleClass($('.dim-header').toggleClass() == 'dim-header' ? 'dim-header active' : 'dim-header');

  $('.showall').html($('.showall').html() == '+ Expand All' ? '- Hide All' : '+ Expand All');

  return false;
});

I have a series of boxes that I let users expand and collapse at will. The JQUERY for that works great and the box gets a class of 'active' added to it upon expand and has that class removed upon collapse.

I have a link that fires off the code above that toggles all the boxes to expand or collapse and changes the header image to switch from + to -.

My problem is that if someone has a box or two expanded already before clicking the expand all or collapse all, the toggle won't force ALL the boxes to expand or collapse, the ones already expanded or collapsed do the opposite of the others. I think I need to check to see if the 'active' class is present and if so, either add expand to all or remove from all so the toggle does not get the boxes out of sync...

Can anyone help me with the logic to do this? I think I am close...

Thanks!

could you show some HTML? I have a better idea but I need to know what your HTML looks like first — hunter
– hunter, Commented Jan 13, 2011 at 17:14

hunter · Accepted Answer · 2011-01-13 17:16:42Z

1

var showText = '+ Expand All';
var hideText = '- Hide All';

$('.showall').css("cursor","pointer").click(function(e) {
    e.preventDefault();
    var show = $('.showall').html() == showText;
    $('.showall').html(show ? hideText : showText);

    if (show) {
        $('.value-container').show();
        $('.dim-header').addClass("active");
    }
    else {
        $('.value-container').hide();
        $('.dim-header').removeClass("active");
    }        
});

edited Jan 13, 2011 at 17:16

answered Jan 13, 2011 at 17:09

hunter

63.8k19 gold badges115 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

Precisely what I needed... Thanks for the clarity!

Chandu · Accepted Answer · 2011-01-13 17:10:02Z

0

Try this:

$('.showall').css("cursor","pointer").click(function(){
    $('.value-container').toggle();    
        if($(this).html() == '+ Expand All'){
            $('.dim-header').addClass('active');
            $(this).html('- Hide All');
        }
        else{
            $('.dim-header').removeClass('active');
            $(this).html('+ Expand All');
        }
        return false; 
});

answered Jan 13, 2011 at 17:10

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

Collectives™ on Stack Overflow

Conditional Toggle of Class using JQUERY

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related