Floating text

Floating text


Hello,

with my code below my intention is to expand the text if I click "Header1" and also if I click "Header2" but separately.
The behaviour now is, if I click "Header1" than both texts expand.
How can I do this separately.
Thanks a lot,
All the best.

  1. <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
            <title>JSP Page</title>
        </head>
        <body>
            <h1>Hello World!</h1>

             <div id="latestNews">
                <div id="latestNewsHeader">Letzte Neuigkeiten</div> <br />
                <div class="latestNewsShortcut">Header1</div>
                <p class="latestNewsText" style="display: none">text..</p>
                <br />
                <div class="latestNewsShortcut">Header2</div>
                <p class="latestNewsText" style="display: none">text...</p>
                <br />
            </div>
           
             <script>
                $(".latestNewsShortcut").hover(function () {
                    $(this).css({fontWeight:"bold"});
                    $(this).css("text-decoration", "underline");
                        },function() {
                            if(!$(".latestNewsText").is(":visible")) {
                                $(this).css({fontWeight:"normal"});
                                $(this).css("text-decoration", "none");
                                }
                            }
                    );
                $(".latestNewsShortcut").click(function () {
                    if($(".latestNewsText").is(":visible")) {
                        $(".latestNewsShortcut").css({fontWeight:"normal"});
                        $(".latestNewsText").hide("fast");
                        }
                    else {
                        $(".latestNewsShortcut").css({fontWeight:"bold"});
                        $(".latestNewsText").show("fast");
                        }
                    });
            </script>

        </body>
    </html>