jQuery toogle-一个打开，另一个隐藏-在代码中的任何位置

我有两个问题。1.当我单击第一个"详细信息"时，文本会在下面打开，但我希望打开第二个"详细内容"，第一个要关闭。2.同样重要的是，"详细信息"将在代码的早期应用。class="clickme"和id="#me"之间会有一些队列在这种情况下，代码不起作用。

<p class="clickme" style="cursor:pointer;">Details</p>
<div id="me" style="display: none; background-color: yellow;">
Here is the text, which appears for clicking above.
</div>
<p class="clickme" style="cursor:pointer;">Details</p>
<div>hello</div>
<div id="me" style="display: none; background-color: blue;">
Here is the text, which appears for clicking above.
</div>
         $('.clickme').click(function() {
              //.next take the next DOM element
              $(this).next('#me:first').animate({
                   height: 'toggle'
                   }, 200
              );
         });

你能帮我吗？

谨致问候，Atti

                <div id="cs_containter">
                    <div id="cs_left">
                        <div id="cs_left_image">
                        </div>
                    </div>
                    <div id="cs_right">
                        <div id="cs_right_main">
                            <div id="cs_right_main_title">
                                <h1 class="cs_aj_cim">Something New</p>
                            </div>
                            <div id="cs_right_main_content">
                                <p class="cs_short_description">
                                Minimum text is...
                                </p>
                            </div>
                            <div id="cs_right_main_bottom">
                                <div id="cs_right_main_bottom_left">
                                    <div id="csrmbr_ker">
                                        <p class="cs_reszletek_ar">Like</p>
                                    </div>
                                </div>
                                <div id="csomag_right_main_bottom_right">
                                    <div id="csrmbr_keret">
                                        <p class="clickme csomag_reszletek_ar" style="cursor:pointer;">It cannot be working...</p>
                                    </div>
                                </div>
                                <div id="clear"></div>
                            </div>
                            <div id="clear"></div>
                        </div>
                    </div>
                    <div id="clear"></div>
                </div>
                    <div class="me" style="display: none; background-color: yellow;">
                        Text which is yellow
                    </div>
                        <div id="cs_containter">
                    <div id="cs_left">
                        <div id="cs_left_image">
                        </div>
                    </div>
                    <div id="cs_right">
                        <div id="cs_right_main">
                            <div id="cs_right_main_title">
                                <h1 class="cs_aj_cim">Something New</p>
                            </div>
                            <div id="cs_right_main_content">
                                <p class="cs_short_description">
                                Minimum text is...
                                </p>
                            </div>
                            <div id="cs_right_main_bottom">
                                <div id="cs_right_main_bottom_left">
                                    <div id="csrmbr_ker">
                                        <p class="cs_reszletek_ar">Like</p>
                                    </div>
                                </div>
                                <div id="csomag_right_main_bottom_right">
                                    <div id="csrmbr_keret">
                                        <p class="clickme csomag_reszletek_ar" style="cursor:pointer;">It cannot be working...</p>
                                    </div>
                                </div>
                                <div id="clear"></div>
                            </div>
                            <div id="clear"></div>
                        </div>
                    </div>
                    <div id="clear"></div>
                </div>
                    <div class="me" style="display: none; background-color: yellow;">
                        Text which is yellow
                    </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var $mes = $('.me')
$('.clickme').click(function () {
    //.next take the next DOM element
    var $me = $(this).nextAll('.me:first').animate({
        height: 'toggle'
    }, 200);
    $mes.not($me).hide();
});
</script>