Question

I have to create one expandable /collapseable panel in jQuery, and facing some issues.
code
HTML

           <div>
              <img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
                <div>
                  <span>
                    Hello
                </span>
               <ul class="myul">
                  <li>one</li>
              <li>Two</li>
                  </ul>
               </div>
              <img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
                <div>
                  <span>
                   r u there
               </span>
              <ul class="myul">
                <li>three</li>
                    <li>four</li>
                    </ul>
                 </div>
                 </div>

jQuerycode:

               $(document).ready(function() {

                $(".myul").hide();

                  $("img").click(function() {
                     $(this).next(".myul").slideToggle(600);
                     });
                   });

when I delete the inner div tag

                     <div>
                  <span>
                    Hello
                     </span>

its working fine, but with the innere div its not working.Can somebody help.
Thanks.
EDIT:
if the code is something like:

        <li class="first">
      <span>

        <img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" width="15" height="15" alt="arrow" />
      </span>
      <div class="mydiv">
        <h3>
          ...
        </h3>
        <span>.... </span>
          <span>.... </span>


        <ul class="myul">
           .......

then i have tried ur code..but its not working.am i missing something.

Answer 1

$(this).next("div").find(".myul").slideToggle(600);

next is looking for siblings. With the div, .myul isn’t on the same level as the image, so your code fails.

For the update code, try:

$(this).parent().next("div").find(".myul").slideToggle(600);

The image is inside a span, so obviously the div isn’t next to the image.