Multiple toggle and expand/collapse image problem

Multiple toggle and expand/collapse image problem

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: 

  1. <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:

  1. 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.