jquery - 展開/折りたたみが正しく機能しない

Question

divを展開＆折りたたみたい。このために私は使用します:-

<ul class="link">
    <li>main link 1<span>[-]</span>
        <ul class="inner_div" style="display:block">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
<ul class="link">
    <li>main link 2<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
 <ul class="link">
    <li>main link 3<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
 <ul class="link">
    <li>main link 4<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>

スクリプトは次のとおりです。

$('.link span').click(function(){
$(".inner_div").hide();
var $ul = $(this).next();
$(this).html( $ul.is(':visible') ? '[+]' : '[–]');
$ul.slideToggle();

});

CSSは： -

.inner_div{ display:none; }
.link span { float: right; cursor: pointer; }

動作しますが、Expand div をもう一度クリックすると非表示になります。でも隠しません。もう 1 つの問題は、プラスマイナス記号が正しく機能しないことです。