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

Gepostet von in HTML, JavaScript am 25 November, 2013 | 1 Kommentar

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

[html] <!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> [/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

[html highlight=“6,21″] <!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> [/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

[html highlight=“23,24″] <!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> [/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

[html highlight=“9,13″] <!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> [/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



Verwandte Beiträge


1 Antwort : “JS: HTML Elemente ein- und ausblenden (Quickstart Javascript)”

  1. Christian Linden sagt:
    22. Dezember 2016 um 16:00 Uhr

    Es ist leider nicht optimal, dass beim onclick die Seite immer nach oben an den Anfang springt…

    Antworten

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.