Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Dropdown DIV? (Opgelost)

Chilion - 04/05/2010 14:43
MySQL interesse		Weet ik veel hoe ik het moet noemen, Ik wil een FAQ pagina maken en ik wil dat op het moment dat iemand op de vraag klikt de rest naar beneden schuift en het antwoord te voorschijn komt. Klikt iemand op een andere vraag, vorige antwoord inschuiven, andere antwoord tevoorschijn komen. Kan iemand me een link oid geven waarbij ik wat informatie kan opdoen hierover of kan iemand me een voorzetje geven? Groeten, Chilion

25 antwoorden

Gesponsorde links

Berten - 04/05/2010 14:49
PHP beginner		http://api.jquery.com/toggle/ Lees effe het stukje 'toggles all paragraphs'

dieterke - 04/05/2010 14:54
Nieuw lid		je kan dit ook met css doen, elke keer onder de vraag het antwoord in een div zetten die je css waarde: display: none; meegeeft, als men op de vraag klikt kan je dmv javascript deze div naar display: block zetten

Berten - 04/05/2010 14:57
PHP beginner		dieterke schreef: je kan dit ook met css doen, elke keer onder de vraag het antwoord in een div zetten die je css waarde: display: none; meegeeft, als men op de vraag klikt kan je dmv javascript deze div naar display: block zetten Enkel doet jquery met toggle dit aan en uitzetten automatisch voor je

Chilion - 04/05/2010 15:42 (laatste wijziging 04/05/2010 15:44)

MySQL interesse

Bedankt beide, ik heb het even doorgelezen, en heb nu dit gemaakt.

php code - Bekijk de code zonder highlighting - Klap code in

<?php
	while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("p").toggle();
					});
						
				</script>';
	}
?>

<?php
	while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("p").toggle();
					});
 
				</script>';
	}
?>

Het werkt nog niet helemaal goed. Ik zie de antwoorden niet meer, maar als ik klik op de 2de vraag komen alle antwoorden tevoorschijn. Dat moet niet.
Ik wil per klik dus maar 1 antwoord zien verschijnen

dieterke - 04/05/2010 15:59
Nieuw lid		dan moet je aan u p-tag een id meegeven, en dan de jquery uitvoeren op het id, en niet op de volledige p-tag, anders neemt hij alle p-tags die er zijn, waardoor alles zichtbaar wordt

Maarten - 04/05/2010 16:00
Erelid		Met $("p") selecteer je dan ook alle <p>-elementen. http://api.jquery.com/category/selectors/

Chilion - 04/05/2010 16:24

MySQL interesse

dus, zo? Want dit werkt dus niet

php code - Bekijk de code zonder highlighting - Klap code in

                	<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="anwser"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("anwser").toggle();
					});
						
				</script>';
	}
            
<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="anwser"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("anwser").toggle();
					});
 
				</script>';
	}
 

dieterke - 04/05/2010 16:34
Nieuw lid		krijg je nu steeds hetzelfde of helemaal niets? ik hoop op dat je nog altijd alles krijgt, want dat zou logisch zijn

Chilion - 04/05/2010 16:36
MySQL interesse		Ik krijg dezelfde titels, maar er gebeurt niks meer :-)

dieterke - 04/05/2010 16:38 (laatste wijziging 04/05/2010 16:47)
Nieuw lid		ik ken niet echt iets van jquery, wel van de rest, maar ik denk dat je voor answer een # moet zetten dus ("#answer") als alles goed loopt krijg je nu hetzelfde probleem als daarnet, namelijk dat alles te voorschijn komt bij het klikken dit komt omdat je verschillende id's moet uitdelen, dus dmv een teller ofzo kan je binnen je php code u p-element-id veranderen, bv "<p id='answer".$teller."'>" waardoor je elk p-element een uniek id meegeeft, hierop kan je dan gaan togglen

Chilion - 04/05/2010 16:48

MySQL interesse

Lol, nu gaat, als ik op de onderste klik, de tekst van de bovenste displayen...

Code:

php code - Bekijk de code zonder highlighting - Klap code in

	while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="anwser"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("#anwser").toggle();
					});
						
				</script>';
	}

while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="anwser"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("#anwser").toggle();
					});
 
				</script>';
	}

dieterke - 04/05/2010 16:49
Nieuw lid		aja, klopt, een id moet uniek zijn, dus gaat hij alleen de bovenste bekijken als p-element met answer als id, als je zoals mijn aangepaste post hierboven door middel van een teller echt unieke ids meegeeft is dit probleem normaal opgelost

Chilion - 05/05/2010 08:02
MySQL interesse		Maar, hoe ga ik dan die javascript aangeven welke hij moet toggelen?

vinTage - 05/05/2010 08:06 (laatste wijziging 05/05/2010 08:08)

Nieuw lid

in je while een tellertje mee laten lopen en die bij toevoegen aan het id van je div (en scriptje)

php code - Bekijk de code zonder highlighting - Klap code in

                $tellertje = 0;
while(....)
{
    <div id = $tellertje."_answer" ....>etc</div>
    ......
    $("#".$tellertje."_anwser").toggle();
    $tellertje ++;
}
            
$tellertje = 0;
while(....)
{
    <div id = $tellertje."_answer" ....>etc</div>
    ......
    $("#".$tellertje."_anwser").toggle();
    $tellertje ++;
}
 

Chilion - 05/05/2010 08:08

MySQL interesse

Op deze manier?

php code - Bekijk de code zonder highlighting - Klap code in

while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="ans'.$i.'"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("#anwser'.$i.'").toggle();
					});
						
				</script>';
		$i++;
	}

while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="ans'.$i.'"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("#anwser'.$i.'").toggle();
					});
 
				</script>';
		$i++;
	}

Want dat werkt gewoon lekker niet ;P

vinTage - 05/05/2010 08:11 (laatste wijziging 05/05/2010 08:12)
Nieuw lid		omdat $i undefined is zeker ? en ans moet nog answer worden
Bedankt door: Chilion

Chilion - 05/05/2010 08:13 (laatste wijziging 05/05/2010 08:14)

MySQL interesse

Lol, $i is wel gedefined. Ans nog niet goed gedaan

AAAAAAAAAAAA

Kijk hier maar ff wat het nu is: http://www.chilion.nl/komvoort/index.php?p=faq

Niet goed dus!
Code:

php code - Bekijk de code zonder highlighting - Klap code in

$i = 0;
	//query fetchen
	while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="ans'.$i.'"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("#ans'.$i.'").toggle();
					});
						
				</script>';
		$i++;
	}

$i = 0;
	//query fetchen
	while($row = mysqli_fetch_assoc($res))
	{	
		//gegevens displayen
		print '
				<div class="paragraph">
					<h2>'.$row['question'].'</h2>
					<div class="text" >
						<p style="display: none;" id="ans'.$i.'"><i>'.$row['anwser'].'</i></p>
					</div>
				</div>
				<script>
					$("h2").click(function () {
					$("#ans'.$i.'").toggle();
					});
 
				</script>';
		$i++;
	}

vinTage - 05/05/2010 08:16
Nieuw lid		die h2 moet je ook uniek maken (een id dus ipv op alle h2 tags die code

Chilion - 05/05/2010 08:19
MySQL interesse		Top! Nu wil ik eigenlijk nog dat wanneer een ander antwoord gedisplayed wordt, alle andere gesloten worden. Is dat nog iets wat handig kan?

vinTage - 05/05/2010 08:28 (laatste wijziging 05/05/2010 08:28)
Nieuw lid		je kan beter gaan overwegen om een functie te maken die alles hide met een bepaalde classname en daarna open je bijbehorende tag weer. Maar ik vind, dat als iemand iets geopend heeft, dat dat dan open moet blijven..

Chilion - 05/05/2010 08:30
MySQL interesse		kun je me even voor de boeg schieten hoe ik alles ga sluiten dan? Hier is het juist niet de bedoeling dat alles open blijft omdat je een enorme rij krijgt.

vinTage - 05/05/2010 08:34
Nieuw lid		Als iemand klikt om iets open te zetten dan doen ze dat niet voor niks he, mss willen ze juist wel gewoon alles op een rijtje kunnen zien...je respecteert op jouw manier niet de wens van de bezoeker, maargoed. javascript code - Bekijk de code zonder highlighting - Klap code in $('.classname').css('display', 'none'); $('.classname').css('display', 'none'); Alles met de class "classname" gaat weg nu.

Chilion - 05/05/2010 08:38 (laatste wijziging 05/05/2010 08:38)
MySQL interesse		hmm, er komt een knopje boven alle vragen waarbij de bezoeker ervoor kan kiezen om alle antwoorden te laten zien. Nu heb ik deze code: php code - Bekijk de code zonder highlighting - Klap code in <script> $("#h2t'.$i.'").click(function () { $('.hide').css('display', 'none'); $("#ans'.$i.'").toggle(); }); </script>'; <script> $("#h2t'.$i.'").click(function () { $('.hide').css('display', 'none'); $("#ans'.$i.'").toggle(); }); </script>'; En krijg ik deze foutmelding op de lijn van css Citaat: Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/chilion/domains/chilion.nl/public_html/komvoort/inc/functions.inc.php on line 83

vinTage - 05/05/2010 08:40
Nieuw lid		Moet je al die html maar niet echoen, dan wordt alles 100 keer overzichtelijker ook

Chilion - 05/05/2010 08:43
MySQL interesse		Kheb em al, stomme quote's wrong used. Tnx vinTage!

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten