login  Naam:   Wachtwoord: 
Registreer je!
 Forum

met php een jquery script opbouwen (Opgelost)

Offline keesgerbers - 09/12/2011 20:13 (laatste wijziging 09/12/2011 20:16)
Avatar van keesgerbersLid Hallo ik heb een probleempje:

ik gebruik een jquery script om stukken tekst te verbergen, dit werkt perfect.
nu heb ik een x aantal stukken tekst met een titel waarbij er op de titel moet geklikt worden om de tekst zichtbaar te maken.

dit is het stukje code waar het om gaat:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#slick-toggle_1').click(function() {
  2.     $('#poll_dv_1').toggle(400);
  3. 	$('#poll_dv_2').hide();
  4. 	$('#poll_dv_3').hide();
  5. 	$('#poll_dv_4').hide();
  6. 	etc...
  7.     return false;
  8.   });

wat hierboven dus eigenlijk gebeurd is als je op de link met #slick-toggle klikt wordt div #poll_dv_1 zichtbaar en de rest wordt weer netjes verborgen.

maar nu komt het:
ik heb een x aantal berichten dus bovenstaande code wil ik nu met php gaan opbouwen met de volgend code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2.  	$i = 1;
  3. 	$j = 1;
  4. 	while ($i < $aantal) {
  5. 	echo "\n$('#slick-toggle_".$i."').click(function() { \n";
  6.    	echo "$('#poll_dv_".$i."').toggle(400);  \n";
  7.  
  8.    ?>
  9.   return false;
  10.   });
  11. 		<?php
  12. 		$i++;
  13.  
  14.  
  15. 	}
  16. 	?>

$aantal is het totaal aantal stukken tekst die er beschikbaar zijn

wat de volgende html output geeft:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#slick-toggle_1').click(function() { 
  2. $('#poll_dv_1').toggle(400);  
  3.   return false;
  4.   });


nu lukt het dus om netjes het eerste regeltje goed te krijgen, maar ik zie niet hoe ik automatisch de rest moet genereren, dus zo dat automatisch in de lus de andere div's de .hide() erachter krijgen

weet iemand hoe ik dit het beste kan oplossen?

Mvg, Kees

2 antwoorden

Gesponsorde links
Offline ProjectWebdesign - 09/12/2011 20:38 (laatste wijziging 09/12/2011 20:39)
Avatar van ProjectWebdesign Lid Je zou denk ik beter met HTML classes kunnen werken.
En elke poll + titel in een aparte div zetten. Zo kan je simpel met paar regels jQuery alle polls meteen laten werken.

Zo zou je de HTML van elke poll kunnen opbouwen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="poll">
  2.     <h1>Dit is de titel van een poll</h1>
  3.     <div>Hier komt de content van een poll.</div>
  4. </div>


Met jQuery zou je dan het volgende kunnen doen:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('div.poll h1').click(function() {
  2.     $('div.poll div').hide();
  3.     $(this).parent().find('div').show();
  4. });


Als je nu op een titel klikt wordt elke inhoud van elke poll verborgen en komt de inhoud van de poll waar je op klikt zichtbaar.

Hopelijk lukt het hiermee.
Bedankt door: keesgerbers
Offline keesgerbers - 09/12/2011 22:34
Avatar van keesgerbers Lid ja ik heb het ongeveer gedaan zoals jij voorstelde, kwam toevallig een kant en klare plugin tegen die dit precies verzorgde:

[url]http://papermashup.com/jquery-show-hide-plugin/[/url]
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.172s