title: slideToggle from same DIV classes
body: <p>i am trying implement slidetoggle on class. i have many class but same. it will dynamic so class name same but will be much content. but it not working. i just want when i click <strong>caption</strong> then <strong>captionbox</strong> will open and when i click <strong>close</strong> then <strong>captionbox</strong> will be close.</p>
  
  <pre><code>&lt;div id="list"&gt;
      &lt;ul&gt;
          &lt;li id="arrayorder_42"&gt;
              &lt;div class="captionbox"&gt;
                  &lt;textarea name="" cols="" rows="" placeholder="type your caption"&gt;&lt;/textarea&gt; &lt;a href="#" class="sbtn_green"&gt;save&lt;/a&gt;  &lt;a href="#" class="collapsed sbtn_gray"&gt;close&lt;/a&gt;
  
              &lt;/div&gt;
              &lt;img src="thumbnail/Picture2.jpg" /&gt; &lt;a href="?delete=42" class="sbtn_red"&gt;Delete&lt;/a&gt;
   &lt;a href="#" class="caption sbtn_gray"&gt;caption&lt;/a&gt; 
          &lt;/li&gt;
          &lt;li id="arrayorder_42"&gt;
              &lt;div class="captionbox"&gt;
                  &lt;textarea name="" cols="" rows="" placeholder="type your caption"&gt;&lt;/textarea&gt; &lt;a href="#" class="sbtn_green"&gt;save&lt;/a&gt;  &lt;a href="#" class="collapsed sbtn_gray"&gt;close&lt;/a&gt;
  
              &lt;/div&gt;
              &lt;img src="thumbnail/Picture2.jpg" /&gt; &lt;a href="?delete=42" class="sbtn_red"&gt;Delete&lt;/a&gt;  &lt;a href="#" class="caption sbtn_gray"&gt;caption&lt;/a&gt; 
          &lt;/li&gt;
          &lt;li id="arrayorder_42"&gt;
              &lt;div class="captionbox"&gt;
                  &lt;textarea name="" cols="" rows="" placeholder="type your caption"&gt;&lt;/textarea&gt; &lt;a href="#" class="sbtn_green"&gt;save&lt;/a&gt;  &lt;a href="#" class="collapsed sbtn_gray"&gt;close&lt;/a&gt;
  
              &lt;/div&gt;
              &lt;img src="thumbnail/Picture2.jpg" /&gt; &lt;a href="?delete=42" class="sbtn_red"&gt;Delete&lt;/a&gt;  &lt;a href="#" class="caption sbtn_gray"&gt;caption&lt;/a&gt; 
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i got many answer in stackoverlflow and i tried many but not really work. may be i am missing something. </p>
  
  <pre><code>$(".caption").hover(function(){
      $(this).find('.captionbox').slideToggle();
      });
  </code></pre>
  
  <p>in my demo have many js code which i commented. guys can check. 
  <a href="http://jsfiddle.net/t2j162bv/1/" rel="nofollow">http://jsfiddle.net/t2j162bv/1/</a> demo </p>