ansaurus

Question

jquery plus minus sign on collaps and expand

Answer 1

+1 A:

I have this very thing on my own website. Here's how I do it:

$(".question").click(function () {
    if ($(this).next(".answer").is(":hidden")) {
        $(this).next(".answer").slideDown("slow");
        $(this).children('span').text('-');
    } else {
        $(this).next(".answer").slideUp("slow");
        $(this).children('span').text('+');
    }
});

The HTML looks like this:

<div class="question">
    <span>+</span>blahblah
</div>
<div class="answer">blahblah</div>

dclowd9901 2010-04-27 20:27:40

Answer 2

+3 A:

Change the markup of the msg_head to something like this-

<p class="msg_head">Header-1 <span>[-]</span></p>

and change the toggle function to look like this-

$(".msg_head").click(function(){
    $(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
    $(this).children("span").text("[+]");
}, function() {
    $(this).children("span").text("[-]");
});

Chetan Sastry 2010-04-27 20:35:04

Answer 3

+2 A:

Easiest way to do this is with the .toggleClass( className ). Using this method you can add or remove a class from an element. So modifying your code to the (untested) code below should do the trick. You'll want to offset the padding by an equivalent amount to fit your graphic files.

JavaScript

$(".msg_head").click(function() {
    $(this).next(".msg_body").slideToggle(100);
    $(this).toggleClass('msg_head_expanded');
});

CSS

.msg_head
{
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
  background:#FFCCCC url('plus.png') no-repeat 0 50;
  margin:1px;
}

.msg_head_expanded
{
   background:#FFCCCC url('minus.png') no-repeat 0 50;
}

ahsteele 2010-04-27 20:35:30

You need your `.toggleClass` to be applied to `$(this)` not the `.msg_head` outside of the click function. And it needs `$('.msg_body').hide();`

fudgey 2010-04-27 20:53:45

@fudgey I thought that .slideToggle accomplished the hiding for you. I've pulled the .toggleClass inside of the event but I thought daisy chaining it onto the `.click` was cool. To be totally honest I know enough jQuery to be dangerous. So this is a good learning opportunity for me as I don’t claim to be an expert, just a curious professional looking to improve. ;-)

ahsteele 2010-04-27 21:04:02

@ahsteele: Actually it does do what you think, but having it outside of the click function make it add the `msg_head_expanded` class while the message was hidden. And after clicking on the head, the toggleClass didn't get called again, so the `msg_head_expanded` class was always there. Anyway, I gave you +1 because this is how I would do this now :)

fudgey 2010-04-27 22:50:47

@fudgey now I understand what you were saying. Thanks for the feedback. Corrections are what happen when I post code extemporaneously.

ahsteele 2010-04-27 23:18:00

ansaurus

tags:

views:

answers:

jquery plus minus sign on collaps and expand

related questions