Vis og gem sektioner med klik eller mouse over

Hvis man har en side, hvor man gerne vil vise sektioner afhængig af brugerens valg/klik på diverse knapper og overskrifter, er der flere måder at gøre det på. Som så meget andet ved webdesign er valget af løsning et spørgsmål om personlig præference og opgavens karakter, så der er ikke én løsning til en sådan opgave.

Dette er blevet en af de foretrukne løsninger for hjemmesider de senere år. Metoden har den fordel, at den er utroligt simpel og let at anvende og den fungerer på tværs af diverse platforme. Før i tiden brugte man meget mouse over-effekt, men eftersom tablets og smartphones ikke har en mus, er dette blevet en dårlig løsning, og man går mere og mere over til on click-løsninger.

Hvis man skal bruge noget helt simpelt, hvor man bare har f.eks. en knap til at toggle vis/gem, er den hurtige løsning et lille JavaScript, der ser således ud:


Herefter skal man blot bruge noget man kan klikke på, her bruger vi en knap:



Det kan sagtens være et billede eller en link eller et helt tredje objekt i stedet, hvis man vil have det.

Det sidste vi skal bruge er elementet der skal vises og gemmes. Det kunne f.eks. være en DIV, hvor vi starter med at den er skjult:



Som med det der skal klikkes på, kan sektionen stort set være en hvilken som helst tag man måtte ønske. Det samlede resultat ser nu således ud:



En løsning som den viste, er ikke videre elegant til formål, hvor man gerne vil have en visuel indikator. Man kan udvidde scriptet, hvis man vil det, så man styler vis og gem med f.eks. forskellige farver, men det bliver hurtigt omstændigt i forhold til den næste version, som er lidt mere pragmatisk.


Hvis man i stedet for én knap har to knapper, med hver sin funktion, kan man gøre det, at man ved klik



Vi har nu en knap der starter med at være synlig, og når der bliver klikket på den, bliver den usynlig, og den anden knap og sektionen vi vil vise bliver synlig. Når man så klikker på den knap der nu er synlig, bliver den og sektionen usynlig, og den første knap bliver synlig igen. På skærmen ser det således ud:



Begge fremgangsmåder kan det samme. Valget om det skal være det ene eller det andet er derfor kun et spørgsmål om hvad man foretrækker og hvad der er lettest at lave og vedligeholde som kode.

Brugen af ONMOUSEOVER har tidligere være meget populært til menuer med drop-down og slide-out. I dag er brugen af mouse over ved at være begrænset, for tablets og smartphones har ikke en mus, og når tablets og smartphones skal prøve at konvertere et klik på et mouse over-område til en rigtig ONCLICK-kommando går det ikke altid lige godt.

Men derfor kan vi alligevel godt gennemgå hvordan man får det til at fungere.

Til at lave effekten skal man bruge et objekt at holde musen over. Det kan være et billede eller et stykke tekst eller noget helt tredje. Her bruger vi en DIV. Der skal også være noget at vise. Dette er gerne undermenuer på navigationspanelet, men det behøver det bestemt ikke at være. Her bruger vi et billede.

Vi starter med en DIV med tekst:



Vi skal også have det billede der skal vises ved mouse over. Eftersom det først skal vises når musen er over, skal det nødvendigvis starte med at være gemt, så den bliver udstyret med STYLE="display:none". Så ser koden således ud:



For at vise objektet bruger vi getElementById(), men det betyder, at billedet skal have en ID. Den sætter vi til Logo:



Så når musen er over, skal vi vise objektet med ID="Logo". Så ser det således ud:



Her er det så man lige skal tænke sig lidt om. Det var når musen kom over teksten. Hvad så når musen ikke længere er over? Derfor skal man huske at specificere ONMOUSEOUT. Her vil vi have den til at forsvinde igen. Så ser det således ud:



På skærmen kommer det til at se således ud:

Vis og gem med radiobuttons har den fordel, at der i systemet ligger, at man kun har ét aktivt valg, dvs. det er kun den valgte sektion der vises, og resten gemmes. Det er en fin måde at holde brugerfladen lidt mere overskuelig, når brugerne klikker rundt på må og få. Programmeingsmæssigt ligner det checkboxes, men der er et par væsentlige detaljer, så man ikke blot kan lave copy/paste.

Løsningen består af tre dele:

1. Radiobuttons, dvs. en FORM, til at vælge fra
2. Sektionerne der skal vises og gemmes
3. Et JavaScript der forbinder klik med sektioner

I den løsning vi laver her, bliver det en generel løsning, således at man kan nøjes med ét script til flere sæt radiobuttons.

Det første vi laver er vores radiobuttons. Vi bruger tag'en FORM, og ved klik på en knap, eksekverer vi funktionen VisRadioButtonDiv, med de to værdier Gruppenavn og 3. Hvad de to går ud på, kommer vi tilbage til. Så ser koden således ud:


Detaljerne om hvordan man laver ting med radiobuttons kan læses her, hvis man har lyst til det.


JavaScriptet man skal bruge, ser således ud:


I eksemplet på denne side, er JavaScriptet lagt op i siden HEAD-tag, fordi det kun bliver brugt den ene gang. Skal man bruge det flere gange, som scriptet lægger op til, vil man normalt have det som et eksternt script.

Det som scriptet gør, er at de to værdier Gruppenavn og 3 fungerer som hhv. første del af det identifikationsnavn der skal søges på, og en angivelse af antallet af knapper. Bruger man kun radiobuttons den ene gang, vil man sædvanligvis stryge variablen NumberOfButtons og bare have for(x=1;x<=3;x++) i scriptet.

Herefter gennemløber scriptet de radiobuttons der hører sammen (samme NAME-attribut). Hvis der er klikket på den, bliver den tilhørende sektion vist, og ellers bliver den gemt. Det er derfor navnene er valgt som de er. Der er et basisnavn, IdBaseName, hvorpå der sætte tallene fra 1 til antallet af radiobuttons, dvs. 3, så den ser efter ID'erne Gruppenavn1, Gruppenavn2, osv. Det er den liste der hedder CheckThisButton. Den anden liste er CheckThisButton hvorpå der er tilføjet Div, så den hedder Gruppenavn1Div, Gruppenavn2Div, osv. Nu følger de to sæt navne hinanden, så hvis der er klikket af på den radiobutton der har ID="Gruppenavn1" vises den DIV der har ID="Gruppenavn1Div" og så fremdeles.


Dette bringer os til den sidste del: De sektioner der skal vises og gemmes. Her bruger vi en DIV, men det kan lige så godt være en hvilken som helst anden tag, og det behøver heller ikke den samme tag, dvs. man kan godt have at den ene er en tabel, den anden en DIV og den tredje en liste. Det kørere alene på attributten ID.

Koden for de tre DIV'er, der udgør sektionerne, kommer til at se således ud:



Det samlede resultat kommer til at se således ud på skærmen:

Checkboxe er grundliggende bare en variation over ID og ONCLICK, hvor man i stedet for knapper har en checkbox der markerer om muligheden er valgt eller ej. Hvis man har mange felter der skal vises og gemmes, er checkboxe en grafisk mere overskuelig løsning en blot et væld af knapper, men som sådan har checkboxes ikke nogen funktionalitet der ikke kan laves med knapper, som vist øverst på siden. Programmeingsmæssigt ligner det radiobuttons, men der er et par væsentlige detaljer, så man ikke blot kan lave copy/paste.

Løsningen består af tre dele:

1. Checkboxe, dvs. en FORM, til at vælge fra
2. Sektionerne der skal vises og gemmes
3. Et JavaScript der forbinder klik med sektioner

I den løsning vi laver her, bliver det en generel løsning, således at man kan nøjes med ét script til flere sæt checkboxe.

Det første vi laver er vores checkboxe. Vi bruger tag'en FORM, og ved klik på en knap, eksekverer vi funktionen VisCheckboxDiv, med de to værdier Boxnavn og 3. Hvad de to går ud på, kommer vi tilbage til. Så ser koden således ud:


Bemærk, at fordi de afklikkede checkboxe ikke er inbyrdes afhængig som radiobuttons, er det ikke nødvendig med NAME-attributten til checkboxes.

JavaScriptet man skal bruge, ser således ud:


I eksemplet på denne side, er JavaScriptet lagt op i siden HEAD-tag, fordi det kun bliver brugt den ene gang. Skal man bruge det flere gange, som scriptet lægger op til, vil man normalt have det som et eksternt script.

Det som scriptet gør, er at de to værdier Boxnavn og 3 fungerer som hhv. første del af det identifikationsnavn der skal søges på, og en angivelse af antallet af knapper. Bruger man kun checkboxes den ene gang, vil man sædvanligvis stryge variablen NumberOfBoxes og bare have for (x=1;x<=3;x++) i scriptet.

Herefter gennemløber scriptet alle tags på siden igennem og leder efter den ønskede ID. Hvis ID bliver fundet, tjekkes der for om den er klikket klikket af eller ej. Hvis ja, bliver den tilhørende sektion vist, og ellers bliver den gemt. Det er derfor navnene er valgt som de er. Der er et basisnavn, IdBaseName, hvorpå der sætte tallene fra 1 til antallet af checkboxe, dvs. 3 i dette eksempel, så den ser efter ID'erne Boxnavn1, Boxnavn2, osv. Det er den liste der hedder CheckThisBox. Den anden liste er CheckThisBox hvorpå der er tilføjet Div, så den hedder Boxnavn1Div, Boxnavn2Div, osv. Nu følger de to sæt navne hinanden, så hvis der er klikket af på den checkbox der har ID="Boxnavn1" vises den DIV der har ID="Boxnavn1Div" og så fremdeles.


Dette bringer os til den sidste del: De sektioner der skal vises og gemmes. Her bruger vi en DIV, men det kan lige så godt være en hvilken som helst anden tag, og det behøver heller ikke den samme tag, dvs. man kan godt have at den ene er en tabel, den anden en DIV og den tredje en liste. Det kørere alene på attributten ID.

Koden for de tre DIV'er, der udgør sektionerne, kommer til at se således ud:



Det samlede resultat kommer til at se således ud på skærmen: