Jquery div in div breaks

  <script type="text/javascript">
                    jQuery(document).ready(function() {
                        jQuery(".content").hide();
                开发者_JS百科        //toggle the componenet with class msg_body
                        jQuery(".link").click(function()
                        {
                            jQuery(this).next(".content").slideToggle(500);
                        });;
                    });
 </script>


<a href="#" class="link">dfsd</a>


    <div class="content"> 
            dfsgdgsfsdfggdfs
        </div>

Is working fine however when I put in another div:

<div class="test">
    <div class="content"> 
       dfsgdgsfsdfggdfs
   </div>
</div>

How to fix this? I have tried .test.link etc but it didnt work.

jQuery(this).next(".test").find('.content').slideToggle(500);

OR

jQuery(this).next(".test").slideToggle(500);

replace this line: jQuery(this).next(".content").slideToggle(500);

with this one: jQuery("div.content").slideToggle(500);

$(this).next(".content") looks for siblings

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

use $(this).next(".test")