✔ jQuery Toogle

R

Roflmao

Mitglied
Guten Morgen.

Ich habe über google ein Weg gesucht um eine Toggle Slide auf meiner Website zu integrieren.

Javascript: 
$(document).ready(function(){

	$(".toogle_containger").hide();

	$(".trigger").click(function(){
		$(this).toggleClass("active").next().slideToogle("slow");
	});

});


Der HTML Aufbau sieht so aus:

HTML: 
<h2 class="trigger"><a href="#"> Trigger</a></h2>

<div class="toogle_container">
	<div class="block">
		<hr3> Contenct Header </h3>
		          Content
                             .
                             .
                             .

	</div>
</div>

Es funktioniert auch alles schön und gut, nun möchte ich aber den Content gerne an eine andere Stelle im HTML setzen als den Trigger, aber soviel wie mir mein gesunder Menschenverstand sagt, wird es ein Problem mit dem .next() Argument geben. Ich stelle mir das so vor, dass wenn der Trigger aktiviert wird. JQuery nach dem nächsten div mit der id/klasse toogle_container sucht und dieses dann veraendert.
Ich nehme an, dass ich jeden Trigger und jeden Content eine einzigartige ID zuweisen muss, aber wie sieht dies jetzt in Detail aus?

So stelle ich mir meienn Code in etwa vor:

Trigger 1
Trigger 2
Trigger 3
.
.(anderer HTML Code)
.
Content 1
Content 2
Content 3

Danke
 
Roflmao hat gesagt.:
Ich nehme an, dass ich jeden Trigger und jeden Content eine einzigartige ID zuweisen muss, aber wie sieht dies jetzt in Detail aus?
Zum Vergrößern anklicken....

Genau das musst du in der Regel eben nicht tun (jQuery sei dank). Wenn sich die trigger und content Elemente irgendwie anders sinnvoll zuordnen lassen, dann geht das auch einfacher.

Ich habe zur Demonstration zwischen trigger und content ein paar Elemente gesetzt und die content Elemente noch in ein extra div gesteckt. Trotzdem ist die Zuordnung mittels jQuery ein Kinderspiel.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>jQuery FTW!</title>
</head>

<body>
	<h2 class="trigger"><a href="#">Trigger 1</a></h2>
	<h2 class="trigger"><a href="#">Trigger 2</a></h2>
	
	<p id="bar1">blahh</p>
	<p id="bar2">bacon strips</p>
	
	<div id="foo">
		<div class="toogle_container">
			<div class="block">
				<h3> Content 1 Header </h3>
					Content 1
			</div>
		</div>
		
		<p>foo foo foo</p>
		
		<div class="toogle_container">
			<div class="block">
				<h3> Content 2 Header </h3>
					Content 2
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		var
			$triggers = $('.trigger'),
			$contents = $('.toogle_container').hide();
		
		$triggers.click(function(e) {
			e.preventDefault();
			
			var clickedIndex = $triggers.index(this);
			
			$contents.eq(clickedIndex).slideToggle('slow');
		});
	});
	/* ]]> */
	</script>
</body>

</html>
 
Hey Danke schoneinmal.

Dein Beispielcode funktioniert super, aber woher weiss JQuery welcher Trigger zu welchen Content passt? Fuer mich sehen beide Trigger exakt gleich aus.

Desweiteren ist es moeglich 2 seperate Trigger fuer einen Contentblock zu erstellen?
 
Roflmao hat gesagt.:
Dein Beispielcode funktioniert super, aber woher weiss JQuery welcher Trigger zu welchen Content passt?
Zum Vergrößern anklicken....

So umfangreich ist mein Code ja nicht. Die zuordnung läuft über die Reihenfolge im Dokument (der fünfte Trigger gehört zum fünften Content).

http://api.jquery.com/index/
http://api.jquery.com/eq/

Roflmao hat gesagt.:
Desweiteren ist es moeglich 2 seperate Trigger fuer einen Contentblock zu erstellen?
Zum Vergrößern anklicken....

Das funktioniert mit dem oben genannten Verfahren natürlich nicht, weil die Zuordnung dann nicht mehr funktioniert. Je nach dem, was genau du vor hast, ließe sich das aber mit dem gleichen Verfahren doch lösen, in dem man zwei getrennte Listen für die Zuordnung führt.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>jQuery FTW!</title>
</head>

<body>
	<h2 class="trigger"><a href="#">Trigger 1</a></h2>
	<h2 class="trigger"><a href="#">Trigger 2</a></h2>
	
	<p id="bar1">blahh</p>
	<p id="bar2">bacon strips</p>
	
	<div id="foo">
		<a href="#" class="small_trigger">Kleiner Trigger 1</a>
		<div class="toogle_container">
			<div class="block">
				<h3> Content 1 Header </h3>
					Content 1
			</div>
		</div>
		
		<p>foo foo foo</p>
		
		<a href="#" class="small_trigger">Kleiner Trigger 2</a>
		<div class="toogle_container">
			<div class="block">
				<h3> Content 2 Header </h3>
					Content 2
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		var
			$triggers = $('.trigger'),
			$small_triggers = $('.small_trigger'),
			$contents = $('.toogle_container').hide();
		
		$triggers.click(function(e) {
			e.preventDefault();
			
			var clickedIndex = $triggers.index(this);
			
			$contents.eq(clickedIndex).slideToggle('slow');
		});
		
		$small_triggers.click(function(e) {
			e.preventDefault();
			
			var clickedIndex = $small_triggers.index(this);
			
			$contents.eq(clickedIndex).slideToggle('slow');
		});
	});
	/* ]]> */
	</script>
</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück