#6 – Divs hoch und runter sliden

Wie in unserem FAQ Bereich wollen wir hier mit Hilfe von jQuery einen Div-Slider bauen. Ich habe die FAQs leicht umgebaut und als neues Projekt aufgebaut. Auf Knopfdruck sollen nun die entsprechenden Antworten zu den FAQs runtergefahren werden. Bei erneutem Klick sollen diese wieder hochfahren. Wir schreiben in diesem Tutorial den gesamten JavaScript Code für ein vorbereitetes und gestyltes System von FAQs. Die Beispieldateien können wie immer direkt heruntergeladen und modifiziert werden.


Get the Flash Player to see the wordTube Media Player.

html Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="header/header.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="Javascript" src="script.js"></script>
<title>PHP Testseite</title>
</head>

<body>
<?php include('header/header.php'); ?>

<div class="faqcontainer">

<div class="faqheader">
<h2>Werbeagentur Grafik-deal.de</h2>
</div>

<div class="faqquestion">
<p>Wieviel kostet eine Beratung bei Grafik-Deal.de?</p>
</div>
<div class="faqanswer">
<p>Eine Beratung ist selbstverständlich in jedem Fall kostenlos. Wir beraten Sie gern detailliert und eingängig bevor wir über Preise und Abrechnungen sprechen. Sprechen Sie uns einfach an und überzeugen Sie sich selbst.</p>
</div>

<div class="faqquestion">
<p>Wieviel kostet die Umsetzung meines Projekts?</p>
</div>
<div class="faqanswer">
<p>Pauschale Preisangaben sind in diesem Fall natürlich ungemein schwierig. Jedes Projekt wird so individuell bearbeitet, dass sich Zeitaufwand, Projektelemente und die Anforderungen immer so sehr unterscheiden, dass man pauschale Angaben unmöglich mit fixen Angaben machen kann. Für alle Interessierten bieten wir aber eine Preisliste an, die für viele Teilprojekte Richtwerte beinhaltet. Kontaktieren Sie uns, wir schicken Ihnen gern einen ersten Überblick.</p>
</div>

<div class="faqquestion">
<p>Wie lange dauert die Umsetzung eines Projekts?</p>
</div>
<div class="faqanswer">
<p>Um Ihnen eine grobe Vorstellung für den Zeitumfang eines Projektes vermitteln zu können, haben wir einige grobe Richtwerte zusammengetragen. Es handelt sich dabei natürlich um unverbindliche Richtwerte, die etwas großzügiger gewählt sind. Im Allgemeinen arbeiten wir ab Projektbeginn non-stop um Ihnen Zeit und Geld zu sparen.<br>
<ul class="faqlist">
<li>Website Standard: ca. 2-3 Wochen</li>
<li>Website dynamisch / CMS: ca. 3-4 Wochen</li>
<li>Webshop: ca. 4-8 Wochen</li>
<li>Printwerbung inkl. Druck: ca. 6-10 Tage</li>
<li>Umfangreiche Printwerbung: ca. 2-3 Wochen</li>
</ul></p>
</div>

<div class="faqquestion">
	<p>Kann ich meine Website während der Erstellung beobachten?</p>
</div>
<div class="faqanswer">
	<p>Wir richten für Sie eine eigene Projekt-URL ein, unter der Sie den aktuellen Status Ihrers Webprojekts ständig selbst verfolgen können. Bei großen Entwicklungsschritten werden Sie von uns nochmal gezielt darauf hingewiesen. So haben Sie zu jedem Zeitpunkt den vollen Überblick über Ihren Projektstatus.</p>
</div>

<div class="faqquestion">
<p>Betreuen Sie auch Firmengründer?</p>
</div>
<div class="faqanswer">
<p>Für Firmengründer haben wir spezielle Start-Up Modelle im Angebot, die individuell alle Anforderungen für einen erfolgreichen Start in die unternehmerische Tätigkeit gewährleisten. Sprechen Sie uns unverbindlich an, wir informieren Sie gern.</p>
</div>

<div class="faqquestion">
<p>Ich habe schon eine Werbeagentur, möchte aber wechseln.</p>
</div>
<div class="faqanswer">
<p>Wenn Sie bereits von einer Werbeagentur betreut werden, setzen wir uns gern mit dieser in Verbindung und bereiten einen Wechsel oder eine Zusammenarbeit vor. Sie müssen uns nur mitteilen wie Sie sich die neue Aufgabenverteilung vorstellen und wir kümmern uns um den Rest.</p>
</div>

</div>

</body>
</html>

JavaScript Code

$(document).ready(function() {

	$('.faqquestion').click(function() {

		if ( !$(this).hasClass('show') ) {

        	$(this).css('border','1px solid black');
		$(this).addClass('show').next('.faqanswer').slideDown('normal');

		} else {

		$(this).removeClass('show').next('.faqanswer').slideUp('normal');
		$(this).css('border','1px solid #D2D5D6');

		}

		});	

	});

Kommentar schreiben