Javascript und jQuery

Praktische Beispiele zu JavaScript, Ajax und jQuery

jQuery show, hide, toggle

Die Javascript Libary jQuery liefert mit den Funktionen show(), hide() und slideToggle() beste Voraussetzungen, um damit mit einem Klick auf einen Link, Inhalte die in einem Div-Element liegen, ein- und auszublenden. Das folgende HTML5 Dokument, ist mit allem nötigen ausgestattet, um die jQuery slideToggle() Funktion zu beguachten.

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery show and hide div</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // beim Laden des Dokuments das Div-Element mit der CSS Klasse div_show-hide
            // auf display:none; setzen
            $(".div_show-hide").hide();
            $(".a_show-hide").show();
            // bei anklicken des Links mit der CSS Klasse a_show-hide,
            // wird der Div-Container ein- und ausgeblendet
            $('.a_show-hide').click(function() {
                $(".div_show-hide").slideToggle();
            });
        });
    </script>
</head>
    <body>
        <a href="#" class="a_show-hide">Div ein- und ausblenden</a>
        <div class="div_show-hide">
            <p>Text der eingeblendet werden soll.</p>
            <p><a href="#" class="a_show-hide">Box schließen</a></p>
        </div>
    </body>
</html>