title: jQuery Toggle show/hide on the span action
body: <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>