Toggle Funktion

L

Laserdance

Grünschnabel
Hallo Liebe Community!
Ich bin ein blutiger JavaScript Anfänger, versuche aber von anfang an möglichst schlank und strukturiert zu programmieren.

Ich habe auf meiner Webseite eine Toggle Funktion per jQuery realisiert.

Dabei sollen Div-Container mittels Slide-Toggle ein- und ausgeblendet werden, wenn man auf die Überschrift klickt.

Das funktioniert schon, aber ich produziere für jedes div überflüssigen code und brauche eure hilfe um meine funktion zu verallgemeinern


Der Code sieht wie folgt aus:

HTML
HTML: 
<h3 id="ID_headline">Überschrift, die angeklickt weden kann um Div ein- und auszublenden</h3>
<div id="ID_div_container" class="div_lieder">
TEXT
...

JavaScript mit jQuery
Javascript: 
	$("#ID_headline").click(function(event) {
		$("#ID_div_container").slideToggle(800);
	});

Wie kann ich diese Funktion so verallgemeinern, dass ich nicht für jedes Div einzeln eine Funktion mit eigener ID der Überschrift und eigener ID des zu togglenden Containers angeben musss?

Das live Beispiel mit den Kinderliedern seht ihr hier: http://www.baby-infos.net/kinderlieder.php

bisher habe ich die funktion immer kopiert und die IDs der Überschriften und Divs ersetzt.



Zweite Frage:

ich blende per
<body onload="toggle_start('div_erster_text'); ..... <body onload="toggle_start('letzter_div_container_text'); >
beim laden meiner Seite alle Liedtexte aus.

Dabei muss ich die Funktion auch immer neu kopieren und die ID anpassen.
Ich hoffe, wenn ich die o.g. Funktion verallgemeinert habe, dass ich dann auch die Divs z.B. über ihre klasse alle zusammen mit einem befehl ausblenden kann.


Vielen Dank im Voraus für eure Hilfe
 
Zuletzt bearbeitet:
Hier gibt es drei Überschriften und drei Container mit der gleichen Klasse über die die Funktion ausgelöst wird.
Entscheidend ist aber die jeweils letzte Zahl der ID. Anhand dieser wird ermittelt welche Überschrift angeklickt wurde und der dazugehörende Container wird ein- oder ausgeblendet.

HTML: 
<h3 id="ID_headline_1" class="h3">Überschrift 1</h3>
<div id="ID_div_container_1" class="div_lieder">Container 1</div>
<br/>
<br/>
<h3 id="ID_headline_2" class="h3">Überschrift 2</h3>
<div id="ID_div_container_2" class="div_lieder">Container 2</div>
<br/>
<br/>
<h3 id="ID_headline_3" class="h3">Überschrift 3</h3>
<div id="ID_div_container_3" class="div_lieder">Container 3</div>

Und der Code für alle DIVs:

Javascript: 
$(".h3").click(function() {
    id = $(this).attr("id").replace(/ID_headline_/, "");
    $("#ID_div_container_" + id).slideToggle(800);
});


Zur zweiten Frage: wenn alles was gleichzeitig ein- oder ausgeblendet werden soll die gleiche Klasse hat, kannst du darüber mit einer Funktion alles erledigen.
 
Zuletzt bearbeitet:
danke dir.

funktioniert Perfekt!

die Zweite Problematik konnte ich mit der klasse durch
HTML: 
onload="toggle_start2('.div_lieder')
und
Javascript: 
function toggle_start2(id) {
	$(id).slideToggle(800);
	}
vereinfachen ;)

danke dir
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück