jQuery Toggle show/hide on the span action
<p>I have the following list:</p>

<pre><code>    &lt;div id="topicListContainter"&gt;
            &lt;ul id="sList" class="sList"&gt;
                    &lt;li id="itemList_11"&gt;
                        0. updated  &lt;span class="closeBox" id="11" &gt;&lt;img  src="images/close.png"&gt;&lt;/span&gt;                                   
                        &lt;div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"&gt;&lt;textarea style="width: 100%"&gt;&lt;/textarea&gt;
                            &lt;br&gt;
                            &lt;input type="text" id="date" class="date" /&gt; &lt;input style="margin: 5px" type="button" class="button blue" value="Save" /&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li id="itemList_27"&gt;
                        1. Sta ima  &lt;span class="closeBox" id="27" &gt;&lt;img  src="images/close.png"&gt;&lt;/span&gt;                                   
                        &lt;div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"&gt;&lt;textarea style="width: 100%"&gt;&lt;/textarea&gt;
                            &lt;br&gt;
                            &lt;input type="text" id="date" class="date" /&gt; &lt;input style="margin: 5px" type="button" class="button blue" value="Save" /&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li id="itemList_26"&gt;
                        2. Update 22  &lt;span class="closeBox" id="26" &gt;&lt;img  src="images/close.png"&gt;&lt;/span&gt;                                   
                        &lt;div id="comment_actions" class="comment_actions" style="display: none; margin: 5px"&gt;&lt;textarea style="width: 100%"&gt;&lt;/textarea&gt;
                            &lt;br&gt;
                            &lt;input type="text" id="date" class="date" /&gt; &lt;input style="margin: 5px" type="button" class="button blue" value="Save" /&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                        .....
</code></pre>

<p>How can I toggle and show/hide the <code>&lt;div&gt;</code> <code>comment_actions</code> on the click of the action of <code>closeBox</code></p>

<p>Note: each <code>&lt;li&gt;</code> has its own <code>comment_actions</code> div</p>

<p>So far I have tried something like:</p>

<pre><code>jQuery('.closeBox').live('click', function() {   
        jQuery(this).next('div').hide();
});
</code></pre>
