login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Gebruik van JQuery met de show / hide functionaliteit

Offline Martijn2008 - 16/10/2009 11:31
Avatar van Martijn2008PHP beginner Hallo Sitemasters,

Ik heb op deze site informatie gevonden over de show / hide functionaliteit van JQuery. Dit heb ik inmiddels geïmplementeerd in mijn huidige project. Nu vraag ik me af hoe je in de link een + kunt weergeven als de box uitgeklapt moet worden en een - om deze weer in te klappen.

Het idee is een beetje hetzelfde als Sima in de sidebar van de frontpage gerealiseerd heeft. Het verschil is dat Sima dit heeft gedaan met PHP en ik hetzelfde effect wil bereiken met JQuery.

Bedankt alvast voor jullie hulp!

Martijn

4 antwoorden

Gesponsorde links
Offline prienstra - 16/10/2009 12:52 (laatste wijziging 06/04/2010 14:37)
Avatar van prienstra MySQL interesse Ik heb volgens mij wat je zoekt:



Reageer als dit is wat je zoekt, zal ik het script posten.
Offline Martijn2008 - 16/10/2009 12:55
Avatar van Martijn2008 PHP beginner Superieur, dat is het !
Offline jaronneke - 16/10/2009 13:07
Avatar van jaronneke MySQL interesse Aan de hand van dit kan je het ook prima maken ;)

http://jqueryui.com/demos/accordion/
Offline prienstra - 16/10/2009 13:11
Avatar van prienstra MySQL interesse JS bestand:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function ShowHide(div,image)
  2. {
  3.         var thisLevel = document.getElementById(div);
  4.         var thisImage = document.getElementById(image);
  5.  
  6.         if (thisLevel.style.display == "none")
  7.         {
  8.                 thisLevel.style.display = "block";
  9.                 thisImage.src = "images/min.gif";
  10.         }
  11.         else
  12.         {
  13.                 var thisLevel = document.getElementById(div);
  14.                 thisLevel.style.display = "none";
  15.                 thisImage.src = "images/plus.gif";
  16.         }
  17. }


code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href=\"javascript:ShowHide('div','image');\"><img id=\"image\" src=\"images/plus.gif\" border=\"0\"></a> <a href=\"javascript:ShowHide('div','image');\">Vraag 1</a></strong></p>
  2. <div id=\"div\" style=\"display: none;\">
  3. <p>Antwoord 1</p>
  4. </div>


Plaatjes moet je maar even opzoeken in de broncode en downloaden of zelf maken.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.182s