Collapse & expand div
<p>I make a jquery collapse &amp; expand div. its working but I face a problem that only [+] &amp; span [-] is clickable but i want li means <code>&lt;li&gt;main link 1&lt;span&gt;[+]&lt;/span&gt;</code> as clickable</p>

<pre><code>  &lt;ul class="link"&gt;
  &lt;li&gt;main link 1&lt;span&gt;[+]&lt;/span&gt;

    &lt;ul class="inner_div"&gt;
        &lt;li&gt;&lt;a&gt;test 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 3&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;ul class="link"&gt;
  &lt;li&gt;main link 2&lt;span&gt;[+]&lt;/span&gt;

     &lt;ul class="inner_div"&gt;
        &lt;li&gt;&lt;a&gt;test 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 3&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
&lt;ul class="link"&gt;
&lt;li&gt;main link 3&lt;span&gt;[+]&lt;/span&gt;

    &lt;ul class="inner_div"&gt;
        &lt;li&gt;&lt;a&gt;test 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 3&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="link"&gt;
 &lt;li&gt;main link 4&lt;span&gt;[+]&lt;/span&gt;

    &lt;ul class="inner_div"&gt;
        &lt;li&gt;&lt;a&gt;test 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a&gt;test 3&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p></p>

<p>script is:-</p>

<pre><code> &lt;script type="text/javascript"                  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt; &lt;/script&gt;
&lt;script&gt;
 $('.link span').click(function () {
var $ul = $(this).next();
$(".inner_div").not( $ul ).hide();
$( '.link span' ).html( '[+]' );
if( !$ul.is( ':visible' ) ) {
    $( this ).html( '[&amp;ndash;]');
}
$ul.slideToggle();
});
$(document).ready(function(){
$( '.link' ).first().click();
});
 &lt;/script&gt;
</code></pre>

<p>css is:-</p>

<pre><code>.inner_div{ display:none; }
.link span { float: right; cursor: pointer; }
</code></pre>

<p>please help me.</p>
