Question

I have two toggle divs that have same class name. When i click one of them, the plus symbol on the right side is not replacing with the minus symbol unless i click both of them.

http://jsfiddle.net/adige72/rxW3H/

html:

<div class="collapseTitle">Open 1<div class="symbol">&nbsp</div></div>
<div class="collapseContent">Content 1</div>


<div class="collapseTitle">Open 2<div class="symbol">&nbsp</div></div>
<div class="collapseContent">Content 2</div>

js:

var $coll = $('.collapseTitle');

$coll.click(function() {
    $(this).nextUntil('.collapseTitle').toggle('fast', callbackFn);
        function callbackFn(){
            $('.collapseContent').is(":hidden") ? $coll.find('.symbol').css({'background-position': '0 50%'}) : $coll.find('.symbol').css({'background-position': '-36px 50%'});
        }

$(this).toggleClass("expanded collapsed");


});

$coll.addClass('expanded').click();

Thanks in advance.

Answer 1

Try this.

var $coll = $('.collapseTitle');

$coll.click(function() {
    var $this = $(this);
    $(this).nextUntil('.collapseTitle').toggle('fast', function() {
        $this.next('.collapseContent').is(":hidden") ? $this.find('.symbol').css({
            'background-position': '0 50%'
        }) : $this.find('.symbol').css({
            'background-position': '-36px 50%'
        });
    });
    $this.toggleClass("expanded collapsed");
});

$coll.addClass('expanded').click();​

http://jsfiddle.net/wirey00/rxW3H/1/

I fixed the following

$(this).nextUntil('.collapseTitle').toggle('fast', callbackFn);  // <-- just put the callback function here
        function callbackFn(){
          //  this is checking both .collapseContent.. you need to start from the current clicked .collapseTitle
            $('.collapseContent').is(":hidden") ?  $coll.find('.symbol').css({'background-position': '0 50%'}) : $coll.find('.symbol').css({'background-position': '-36px 50%'});
        }