Untitled

<html>

<head>
    <title>jQuery</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".contenu_point").hide();
            $("hr").hide();
            $(".contenu_chapitre").hide();

            $("div.menu_point").hide();
            $("p.menu_chapitre").click(function() {
                $(this).next("div.menu_point").slideDown(300)
                    .siblings("div.menu_point").slideUp("slow");
            });

            $("p").click(function() {
                $(".contenu_chapitre").html($(this).text());
                $(".contenu_chapitre").show();

            });
            $("a").click(function() {
                $(".contenu_point").html($(this).text());
                $(".contenu_point").show();
                $("hr").show();
            });
        });
    </script>
    <style type="text/css">
        body {
            margin: 10px;
            font: 0.8em Arial, Helvetica, sans-serif;
        }

        .menu {
            width: 150px;
            float: left;
        }

        .menu_chapitre {
            padding: 5px;
            cursor: pointer;
            position: relative;
            margin: 1px;
            font-weight: bold;
            background: #9cf;
            border: 1px solid black;
        }

        .menu_point a {
            display: block;
            color: black;
            background-color: white;
            padding-left: 30px;
            text-decoration: none;
        }

        .menu_point a:hover {
            color: black;
            text-decoration: underline;
        }

        .contenu {
            margin-left: 170px;
            padding: 5px;
            width: 200px;
            height: 200px;
            font-weight: bold;
            background: #9cf;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="menu">
        <p class="menu_chapitre">Chapitre 1</p>
        <div class="menu_point">
            <a href="#">Point 1</a>
            <a href="#">Point 2</a>
            <a href="#">Point 3</a>
        </div>
        <p class="menu_chapitre">Chapitre 2</p>
        <div class="menu_point">
            <a href="#">Point 1</a>
            <a href="#">Point 2</a>
            <a href="#">Point 3</a>
        </div>
        <p class="menu_chapitre">Chapitre 3</p>
        <div class="menu_point">
            <a href="#">Point 1</a>
            <a href="#">Point 2</a>
            <a href="#">Point 3</a>
            <a href="#">Point 4</a>
        </div>
    </div>

    <div class="contenu">
        <p class="contenu_chapitre">Chapitre 1</p>
        <hr>
        <p class="contenu_point">Point 1</p>
    </div>
</body>

</html>