login  Naam:   Wachtwoord: 
Registreer je!
 Forum

show hide

Offline ramonrs - 24/09/2012 13:15
Avatar van ramonrsNieuw lid Onderstaand script laat als je op alle buttons klikt alles naast elkaar zien.
Hoe kan ik ervoor zorgen dat als je op 1 klikt, alleen 1 opent.
En als je daarna op 2 klikt, in dit geval dus, 1 sluit en alleen 2 laat zien.

Plaatscode: 141924

4 antwoorden

Gesponsorde links
Offline Martijn2008 - 24/09/2012 13:37 (laatste wijziging 24/09/2012 13:52)
Avatar van Martijn2008 PHP beginner Hi,

Als je dat graag wilt doen, is het slimst om gebruik te maken van een javascript code-library. Dat bespaart je veel tijd, doordat je minder code hoeft te schrijven. Daardoor is de kans op fouten ook kleiner geworden. De meeste libraries worden bovendien regelmatig geüpdate.

Ik zou je JQuery adviseren, omdat van die library naar mijn idee op dit moment het meest gebruik wordt gemaakt. Ik denk dat je moet kijken naar functies als:
1. .children()
2. .each()
3. .attr()
4. .show()
5. .hide()

Het eindresultaat zou er zo ongeveer uit moeten zien (LET OP: niet getest).

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function Show(container, showid)
  2. {		
  3. 	$(container).children().each(function()
  4. 	{			
  5. 		var id = $(this).attr('id');
  6. 		if(id != null)
  7. 		{
  8. 			if(showid == id)
  9. 				showid.show();
  10. 			else
  11. 				showid.hide();
  12.  
  13. 		}
  14. 	});
  15. }


Hopelijk kom je hier verder mee. Laat je horen of het gelukt is, succes!

Martijn
Offline Martijn - 24/09/2012 14:48 (laatste wijziging 24/09/2012 14:49)
Avatar van Martijn Crew PHP of een manier waar ik de voorkeur aan geef:

Geef alle containers/wrappers/cases dezelfde class en dan doe je iets als dit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="knop_1">Case 1</a> | <a href="knop_2">Case 2</a>
  2. <div id="case_1" class="CaseClass">111</div>
  3. <div id="case_2" class="CaseClass">222</div>


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Haal het id van de knop af, en neem het nummertje (dus vanaf letter 5+)
  2. var clickedId = this.id.substr(5); // @martijn2008: geen attr(), native javascript is sneller ;)
  3. $('#'+clickedId+'_case').slideDown(); // Slide aangeklikte naar beneden
  4. $('.CaseClass').filter(':not(#IdVanAangeklikt)').slideUp(); // Alles behalve aangeklikte omhoog



Edit: Is even snel uit mn hoofd, bugjes kunnen 
Offline ramonrs - 24/09/2012 14:58
Avatar van ramonrs Nieuw lid Hoi Martijn,

thnx!

Ik kreeg ook nog een andere oplossing:

Plaatscode: 141925
Offline Martijn - 24/09/2012 16:46
Avatar van Martijn Crew PHP Op wat jij nu hebt, dat heeft een nadeel, dit zal gaan 'hoppen'. Eerst roep je ALLE cases op omhoog te gaan, en dan 1 weer omlaag. Die ene zal dus even heen en weer gaan, en rekenkracht kosten die niet nodig is(alle beetjes helpen).
Daar is mijn not() dus voor 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.2s