Vis og skjul flere elementer

Et notat om, hvordan du viser og skjuler flere elementer ved to på hinanden følgende klik.

Notatet er et addendum til notatet Klik - og klik igen.

Funktionen er her:

Vis/skjul elementer

Elementet blok1
Elementet blok2
Elementet blok3

Klik en gang på triggeren og elementerne vises. Klik igen, og elementerne forsvinder. Bemærk, at jeg i modsætning til den tidligere artikel her benytter display-egenskaben.

Pointen her er, at den samme funktion viser og skjuler flere elementer på samme tid.

Funktionskaldet

<a href="#" 
onclick="toggleDisplay('box');return false;">
Vis/skjul elementer</a>

Funktionen

Den grundlæggende funktion er den samme som i den tidligere artikel, Klik - og klik igen, det vil sige, vi skal teste for, om elementernes display-egenskab har den ene (block) eller den anden (none) værdi.

Hertil kommer, at vi nu opererer med flere elementer, så vis- eller skjul-handlingen skal foretages på hvert af disse.

Det klares lettest ved at give hvert element en id, der indeholder et tal også lave en løkke, der ændrer på display-værdien for hvert element i tur og orden:

hidden = 0 /* Normaltilstand: elementet er skjult */ 
function toggleDisplay(objekt) {
    if (hidden ==0){
      for (i=1;i<4;i++){
        document.getElementById(objekt+i).style.
        -->  display="block";
      }
      hidden=1;
      return;
    }
    else {
      for (i=1;i<4;i++){
        document.getElementById(objekt+i).style.
        -->  display="none";  
    }
    hidden=0;
  }
}

OBS! hvis du kopierer JavaScript-koden her fra siden er det bydende nødvendigt at du fjerner -->-tegnene.

Vis og skjul ved mouseover

Før musen hen over dette tekstafsnit for at vise kasserne.

Elementet kasse 1
Elementet kasse 2
Elementet kasse 3

Der er det interessante ved dette eksempel, at jeg får demonstreret at der er problemløst at lave en mouseover på et vilkårligt element, her et tekstafsnit: 

<p id="test" 
onmouseover="skiftDisplay('kasse',true);return true;"
onmouseout="skiftDisplay('kasse',false);return true;">
Før musen hen over dette tekstafsnit for
at vise kasserne.</p>

Når vi bruger mouseover og mouseout får vi så at sige kassernes tilstand foræret, idet vi kan sætte en variabel til hhv. true eller false.

Så kommer vores vis-og-skjul funktion til at se således ud:

onoff = 0 /* Normaltilstand: elementet er skjult */ 
function skiftDisplay(objekt, onoff) {
  if (onoff ==1){
    for (i=1;i<4;i++){
    document.getElementById(objekt+i).style.
    -->  display="block";
    }
    onoff=0;
    return;
  }
  else {
  for (i=1;i<4;i++){
  document.getElementById(objekt+i).style.
  -->  display="none";  
  }
  onoff=1;
  }
}

Denne side er senest opdateret: December 14, 2006