[CSS] Hoe 'openklik'-effect te maken met layers?

[Verwijderd]

Ik ben een site aan het maken waarbij ik gebruik wil maken van de mogelijkheid om bepaalde inhoud even in te klappen, die vervolgens ook weer uitklapbaar is. Het gaat niet om een menu, maar om blokken tekst (die inhoud is dynamisch) in de pagina zelf. Met een plus-icoontje klik je een item open, met een min-icoon gaat 'ie weer dicht. Een beetje zoals bij 'Device Manager' in Windows.

Nu heb ik gezocht op Google, bij script sites en hier op GoT, maar een echte oplossing voor het probleem heb ik niet gevonden. Tot nu toe heb ik deze code:

code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>

-en-

code:

<div id="reactieshidden" style="position:relative; height: 0;"> 
 [inhoud, waaronder:]
<img src="images/elements/plus.gif" width="9" height="9" border="0" 
onClick="MM_showHideLayers('reacties','','show');
MM_showHideLayers('reactieshidden','','hide')"></a>
 [inhoud]
</div>
<div id="reacties" style="position:absolute; visibility: hidden;"> 
 [inhoud, waaronder:]
<img src="images/elements/min.gif" width="9" height="9" border="0" 
onClick="MM_showHideLayers('reactieshidden','','show');
MM_showHideLayers('reacties','','hide')"></a>
 [inhoud]
</div>

(Met dank aan Dreamweaver.)

Deze HTML zorgt ervoor dat in 1e instantie de layer 'reacties' verborgen is, maar wanneer op het plusje in layer 'reactieshidden' geklikt wordt, deze zichtbaar wordt, en 'reactieshidden' zelf verdwijnt. Probleem is alleen dat 1) de layer 'reacties' niet op de plek van 'reactieshidden' komt, en 2) de tabel waarin dit alles staat niet 'meeschaalt'. Dus: de layer komt 'over' de bestaande pagina heen te staan, terwijl hij er echt 'in' hoort te staan.

Ben ik een beetje duidelijk, of snapt niemand het nu meer?
Heeft iemand een idee hoe dit aan te passen? De layers kunnen iig niet op 'vaste' plekken komen te staan, want de inhoud van de pagina zelf is ook weer dynamisch..

[ Voor 39% gewijzigd door Verwijderd op 09-11-2003 10:20 ]

[Bosmonster]

Tip 1: Gooi al die Macromedia-crap-code deruit.
Tip 2: Maak een simpel scriptje dat de display waarde van een div togglet van 'none' naar 'block'.

Want wat hierboven staat en Macromedia doet in een onleesbare brei van inefficiente code, kan in een regel of 2

toggleDiv (klik hier)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

code:

function toggleDiv (id) {
   var ele = document.getElementById (id);
   ele.style.display = (ele.style.display=='block') ? 'none' : 'block';
}

[ Voor 203% gewijzigd door Bosmonster op 09-11-2003 11:48 ]

[Verwijderd]

Top, 't werkt! Ik vermoedde al dat MM de boel wat overdreef. Bedankt.

[Bart B]

Bedoel je zoals hier? http://beumer.xs4all.nl/bart/computers.php (klik op het plaatje rechtsboven). Ik heb ooit een PHP-class geschreven voor het genereren van dit (zie http://beumer.xs4all.nl/bart/scripts/CFoldableItems.phps )

[ Voor 41% gewijzigd door Bart B op 09-11-2003 12:13 ]

[jonggoud.nl]

Bosmonster schreef op 09 november 2003 @ 11:36:
...............................

Sorry voor de kick, echter sluit mijn probleem hierbij aan. Ik gebruik deze code ook in een pagina, echter wil ik hebben dat het uitgeklapte block na 20 seconden weer inklapt. Ik heb al zitten klooien met de javascript, dhtml, etc., maar nergens vond ik een implementeerbare code... In welke richting zou ik moeten zoeken om de oplossing te vinden?

[Hican]

Volgens mij kan je dat gewoon afvangen met een SetTimeOut trigger o.i.d. Kijk maar eens op http://javascript.internet.com/ daar staat geloof ik wel iets wat lijkt op wat jij wilt hebben.

[beetle71]

FF zoeken naar de setimeout functie voor javascript.

code:

function toggleDiv (id) {
   var ele = document.getElementById (id);
   if (ele.style.display=='block'){
         ele.style.display = 'none';
   } else {
         ele.style.display = 'block';
         setTimeout("toggleDiv(id)",20000); 

   }
}

ongetest, en met dank aan bosmonster