JS: HTML Elemente ein- und ausblenden (Quickstart Javascript)

Erfahrene Web-Entwickler werden lachen, aber dieses einfache Beispiel ist der beste Einstieg in HTML, JavaScript und jQuery. Es geht um das Ein- und Ausblenden von einem HTML Element. Man braucht diese Funktion, um zum Beispiel in Webapps nicht benötigte Felder auszublenden, wie eine abweichende Lieferadresse.

 

Ausgangspunkt

Ohne eine HTML-Seite geht nichts. Für mein Beispiel verwende ich folgende Seite:
1

Die Seite

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>AxxG-Beispiel</title>
</head>
<body>
<header>
        <h1>Beispiel</h1>
           <nav>
             <ul>
                <li><a href="http://blog.axxg.de">zum Blog</a></li>
                <li><a href="#">Einblenden</a></li>
                <li><a href="#">Ausblenden</a></li>
             </ul>
           </nav>
</header>
<section>
  <h1>Blogbeitr&auml;ge</h1>
           <article>
    <h1>Mein erster Beitrag</h1>
	ganz viel text
           </article>
</section>
</body>
</html>

Ziel dieses Beispiels ist es, das HTML-Element „article“ ein- und auszublenden, wenn ich auf die entsprechenden Links klicke.

 

1.Schritt: jQuery in HTML einbinden

Eigentlich brauch man kein jQuery für das Ein- und Ausblenden, aber das clientseitige Framework bringt einem viele Vorteile z.B.: einfacher Zugriff / einfache Syntax, Browserunabhängigkeit (kapselt die Eigenheiten verschiedener Browser & Versionen) und ggf. Fehlerhandling. Google bietet hierfür einen coolen Service der „Google Hosted Libraries„. Dieser Service bietet stets die aktuelle Version von jQuery und ist extrem auf Geschwindigkeit optimiert.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

2.Schritt: IDs vergeben

Um das gewünschte Tag ansprechen zu können, vergebe ich eine eindeutige ID! Siehe Zeile 21

Die Seite

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>AxxG-Beispiel</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header>
        <h1>Beispiel</h1>
           <nav>
             <ul>
                <li><a href="http://blog.axxg.de">zum Blog</a></li>
                <li><a href="#">Einblenden</a></li>
                <li><a href="#">Ausblenden</a></li>
             </ul>
           </nav>
</header>
<section>
  <h1>Blogbeitr&auml;ge</h1>
           <article id="myArticle">
    <h1>Mein erster Beitrag</h1>
	ganz viel text
           </article>
</section>
</body>
</html>

 

3.Schritt: JavaScript einfügen

In Zeile 23 und 24 habe ich schon zwei Links vorbereitet. Aber aktuell passiert da noch nichts, wenn man drauf klickt. Jedoch werden wir das jetzt ändern. Dafür fange ich das onclick-Event ab und führe eine der folgenden JavaScript-Funktionen aus:

		function einblenden(){
			alert("einblenden");
		}
		
		function ausblenden(){
			alert("ausblenden");
		}

Diese öffnet ein Fenster mit der Meldung: einblenden oder ausblenden.

Die Seite

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>AxxG-Beispiel</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
		function einblenden(){
			alert("einblenden");
		}
		
		function ausblenden(){
			alert("ausblenden");
		}
		</script>
</head>
<body>
<header>
        <h1>Beispiel</h1>
           <nav>
             <ul>
                <li><a href="http://blog.axxg.de">zum Blog</a></li>
                <li><a href="#" onclick="einblenden()">Einblenden</a></li>
                <li><a href="#" onclick="ausblenden()">Ausblenden</a></li>
             </ul>
           </nav>
</header>
<section>
  <h1>Blogbeitr&auml;ge</h1>
           <article id="myArticle">
    <h1>Mein erster Beitrag</h1>
	ganz viel text
           </article>
</section>
</body>
</html>

 

4.Schritt: jQuery anwenden

Jetzt kommt jQuery ins Spiel. Anhand der ID selektieren wir unser Element und blenden es ein oder aus.

		function einblenden(){
			$("#myArticle").show();
		}
		
		function ausblenden(){
			$("#myArticle").hide();
		}

Die Seite

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>AxxG-Beispiel</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
		function einblenden(){
			$("#myArticle").show();
		}
		
		function ausblenden(){
			$("#myArticle").hide();
		}
		</script>
</head>
<body>
<header>
        <h1>Beispiel</h1>
           <nav>
             <ul>
                <li><a href="http://blog.axxg.de">zum Blog</a></li>
                <li><a href="#" onclick="einblenden()">Einblenden</a></li>
                <li><a href="#" onclick="ausblenden()">Ausblenden</a></li>
             </ul>
           </nav>
</header>
<section>
  <h1>Blogbeitr&auml;ge</h1>
           <article id="myArticle">
    <h1>Mein erster Beitrag</h1>
	ganz viel text
           </article>
</section>
</body>
</html>

Fertig!

 

5.Schritt: Animation!

Das sieht doch schon gut aus! Aber mit einer Animation können wir das Ergebnis noch etwas aufpeppen!

		function einblenden(){
			$("#myArticle").fadeIn('slow', function() {
				$("#myArticle").show();
			});
		}
		
		function ausblenden(){
			$("#myArticle").fadeOut('slow', function() {
				$("#myArticle").hide();
			});
		}
<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>AxxG-Beispiel</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
		function einblenden(){
			$("#myArticle").fadeIn('slow', function() {
				$("#myArticle").show();
			});
		}
		
		function ausblenden(){
			$("#myArticle").fadeOut('slow', function() {
				$("#myArticle").hide();
			});
		}
		</script>
</head>
<body>
<header>
        <h1>Beispiel</h1>
           <nav>
             <ul>
                <li><a href="http://blog.axxg.de">zum Blog</a></li>
                <li><a href="#" onclick="einblenden()">Einblenden</a></li>
                <li><a href="#" onclick="ausblenden()">Ausblenden</a></li>
             </ul>
           </nav>
</header>
<section>
  <h1>Blogbeitr&auml;ge</h1>
           <article id="myArticle">
    <h1>Mein erster Beitrag</h1>
	ganz viel text
           </article>
</section>
</body>
</html>

 

Erweiterung

Das Beispiel funktioniert übrigens auch mit anderen HTML-Elementen. Probiert es einfach mal aus!

 

Quellen und weitere Links

 

Copyright © 2013 AxxG – Alexander Gräsel



Kommentar verfassen