login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div verbergen als andere wordt geopend

Offline compudoc - 20/12/2007 19:44
Avatar van compudocPHP beginner sinds kort maak ik gebruik van hidden dív's in combinatie met dit scriptje:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.       function show(id)
  3.       {
  4.             if(document.getElementById(id).style.display!="block") {
  5.                   document.getElementById(id).style.display="block"
  6.             } else {
  7.                   document.getElementById(id).style.display="none"
  8.             }
  9.       }
  10.       </script>

en
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="#" onclick="javascript:show('content')">Show Me!</a>
  2. <div id="content" style="display:none;">  Hello There!</div>


hoe kan ik het scriptje zo aanpassen dat als div1 open is alle andere gesloten moeten zijn en als div2 opengaat, dat div1 dichtgaat (rest moet gesloten blijven, alleen div2 open)

ik ga er even vanuit dat alles gewoon genummerd wordt div1, div2, etc. Als dit niet makkelijk is mag het best anders.

alvast bedankt

6 antwoorden

Gesponsorde links
Offline Rik - 20/12/2007 19:46
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Jouw voorbeeld werkt dus dat de gene die je aanklikt open is en de rest allemaal gesloten?
Offline compudoc - 20/12/2007 19:51
Avatar van compudoc PHP beginner nee de meine werkt alleen met de div die je invoert in de link.
als ik invoer: show('content'), dan zal alleen de div met id: content worden geopend of gesloten. De rest werkt niet.

nou wil ik dat de rest van de div's ook erop werken tegelijk.
Offline Rik - 20/12/2007 19:52
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Ik denk dat ik snap wat je bedoeltk, ik ga even iets in elkaar zetten! 
Offline Koen - 20/12/2007 20:25
Avatar van Koen PHP expert http://www.sitemasters.be/forum/3/26101/1#id175967
Offline Rik - 20/12/2007 20:32
Avatar van Rik Gouden medailleGouden medaille

Crew algemeen		 Die had ik nog niet gezien. 

Mijn versie werkt bijna volledig via javascript zodat je bijna geen extra code meer in je html nodig hebt:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="togglers">
  2. 	<a href="#" rel="div1">Show 1</a>
  3. 	<div id="div1">Content 1</div>
  4. 	<a href="#" rel="div2">Show 2</a>
  5. 	<div id="div2">Content 2</div>
  6. 	<a href="#" rel="div3">Show 3</a>
  7. 	<div id="div3">Content 3</div>
  8. </div>
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function () {
  2. 	var togglerElements = document.getElementById('togglers').getElementsByTagName('a');
  3. 	var contentElements = new Array();
  4. 	for (var i = 0; i < togglerElements.length; i++) {
  5. 		var togglerElement = togglerElements[i];
  6. 		var togglerTarget = togglerElement.getAttribute('rel');
  7. 		if (togglerTarget != '') {
  8. 			var contentElement = document.getElementById(togglerTarget);
  9. 			if (contentElement) {
  10. 				contentElements.push(contentElement);
  11. 				contentElement.style.display = 'none';
  12. 				togglerElement.onclick = function (e) {
  13. 					var event = e || window.event;
  14. 					var target = event.target || event.srcElement;
  15. 					var targetElementId = target.getAttribute('rel');
  16. 					for (var i = 0; i < contentElements.length; i++) {
  17. 						contentElements[i].style.display = 'none';
  18. 					}
  19. 					document.getElementById(targetElementId).style.display = 'block';
  20. 				}
  21. 			}
  22. 		}
  23. 	}
  24. }
Offline compudoc - 20/12/2007 21:30
Avatar van compudoc PHP beginner heel erg bedank,
ik zal het morgen proberen en in mijn script plaatsen.

nogmaals heel erg bedankt!  
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.198s