Accordion mit Toggle Fade erstellen? Frage Accordion mit Toggle Fade erstellen? zu Favoriten hinzufügen

Daumen hoch 0 Daumen runter

Hallo,

ich bin es nochmal. Diesmal würde ich gerne eine Art Toggle Fade erstellen, welches gleichzeitig die Funktion eines Accordions einnehmen soll. Ich habe wieder eine Seite erstellt: Link zur Testseite

Ich habe dort die "Snippets" zusammengesucht und soweit aufgebaut, dass der Toggle Effekt soweit klappt. Nun würde ich gerne das ganze wie ein Accordion aussehen lassen. Heißt - Klick ich auf "Link1" öffnet sich der Inhalt - Klicke ich nun auf "Link2" sollte sich "Link1" schließen und der Inhalt vom 2ten öffnen und das ganze so weiter. Ich wollte mal mit absicht kein jQuery UI nehmen.

Hoffe es kann mir jemand dabei helfen.

Grüße

Alex

Antworten


Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Ungefähr so?

<!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" xml:lang="en" lang="en">
  <head>

		<script type="text/javascript" src="http://xancoremedia.com/fade/jquery.js"></script>	
		<script type="text/javascript">			
			$(document).ready(function() {
				  
				$('div.info a').click(function() {
					$('div.info p').slideUp();
					$(this).parent().find('p').slideDown();
				});

			});
		</script>
	</head>
	<body>

		<div class="info" style="background:#000; color:#fff; padding: 10px; margin: 20px;">
			<a href="#">Eins</a>
			<p style="display:none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>
		
		<div class="info" style="background:#000; color:#fff; padding: 10px; margin: 20px;">
			<a href="#">Drei</a>
			<p style="display:none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>
		
		<div class="info" style="background:#000; color:#fff; padding: 10px; margin: 20px;">
			<a href="#">Zwei</a>
			<p style="display:none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>

	</body>
</html>
Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Hm, wieso von Hand bauen?

http://jqueryui.com/demos/accordion/

Eine gute Anmerkung :-) ... Alex wird sich bestimmt etwas dabei gedacht haben: "... mit absicht kein jQuery UI ..."

martin am 06.09.2012
Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

@martin: leider falsch verstanden. Der Toggle Effekt soll drin bleiben, ebenso auch der fadeIn - fadeOut Effekt. Bei Dir Slided es jetzt und klickt man 2 mal auf den selben Link, Slided der immer wieder neu.

Mein Selbstgebasteltes Script sollte schon so in der Form bleiben nur eben noch nen Effekt des Accordions, dass wenn man den einen Link klickt der andere wieder ausfaden soll.

@thorsten: hatte schon danach geschaut, ist aber für mein Vorhaben zu groß.

Wenns zu umständlich ist, dann versuche ich was anderes :)

Danke aber schonmal für die schnellen Antworten! Wirklich klasse der Support hier!

Ich wollte dir nur einen Weg aufzeigen, verfeinern und es gemäß deiner Vorstellungen finalisieren musst du schon selbst ;)

martin am 06.09.2012

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten