jQuery Toogle @ tutorials.de: Tutorials, Forum & Hilfe

Roflmao · 08.10.11 05:01

Guten Morgen.

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

Code javascript:

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

Der HTML Aufbau sieht so aus:

HTML-Code:

<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

***CPoly*** · 08.10.11 10:29

Zitat von Roflmao

Ich nehme an, dass ich jeden Trigger und jeden Content eine einzigartige ID zuweisen muss, aber wie sieht dies jetzt in Detail aus?

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-Code:

<!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>

Roflmao · 08.10.11 16:24

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?

***CPoly*** · 08.10.11 16:40

Zitat von Roflmao

Dein Beispielcode funktioniert super, aber woher weiss JQuery welcher Trigger zu welchen Content passt?

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/

Zitat von Roflmao

Desweiteren ist es moeglich 2 seperate Trigger fuer einen Contentblock zu erstellen?

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-Code:

<!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>

Roflmao · 08.10.11 16:41

super hat alles funktioniert

nocheinmal Danke

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

JQuery Queuing-Problem beim Hovermenü und & ajax/Jquery Animation

Reload einer Liste und trotzdem toogle Funktionalität ala Facebook

Formularverarbeitung im Hintergrund +File Upload / jquery /jquery.valitation

Toogle Button 2 verschiedenen images?

Toogle soll geöffnet bleiben

E-Mail:

Abonnieren Abbestellen