请问点击一个DIV伸展收缩另一个DIV的有关问题 _JavaScript

请教点击一个DIV伸展收缩另一个DIV的问题
类似下面这个网页的DIV伸展收缩功能是怎么做的？请教各位大侠，我对JS不是很了解
http://www.schuetz.net/schuetz/SCH%C3%9CTZ%20China/zh/COMPANY/%E8%81%94%E7%B3%BB%E4%BA%BA/
就是点击联系人或路线，打开另一个DIV的功能

------解决方案--------------------

HTML code


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
        .head1
        {
            text-align: center;
            font-size: 20px;
            height: 30px;
            line-height: 30px;
            width: 200px;
            background-color: Yellow;
            cursor: pointer;
        }
        .head2
        {
            text-align: left;
            font-size: 20px;
            height: 30px;
            line-height: 30px;
            width: 200px;
            background-color: Aqua;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#head").toggle(function () {
                $(this).removeClass("head1").addClass("head2");
                $("#body").slideDown();
            }, function () {
                $(this).removeClass("head2").addClass("head1");
                $("#body").slideUp();
            });
        });
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="head" class="head1">
            点击
        </div>
        <div id="body" style="height: 200px; width: 200px; display: none; background-color: Red;">
        </div>
    </div>
    </form>
</body>
</html>