#1
06.09.2012 14:21 Uhr
|
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>
|
#3
06.09.2012 15:51 Uhr
|
@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!
|