Section midt i ei web-side

[hemo]

Eg var sikker på at eg hadde stillt spørsmål om dette før, men fann ikkje noko..

 

Korleis kan eg laga ein "section" eller seksjon midt i ei side?

 

Dei som har nytta Lotus sin Notes veit kanskje kva eg meiner?

Der kan du merka eit par avsnitt med tekst og ta Create Section. Lotus lagar då ei klikkbar linje med tekst (den første/øverste) som vil visa/skjula seksjonen.

 

Dette er veldig praktisk, og eg vil gjer det same på mine heimesider.

 

Om det ikkje finnes nokon lur måte å løyse dette på, så har du kanskje eit tips til korleis du kan "gøyme" mykje informasjon på ei side?

[Moonshine]

<script type="text/javascript">
 function vis(id) {
document.getElementById(id).style.display = String ('block');
 }
</script>

*****************
<a href="#" onClick="vis('simsalabim')">VIS</a>
<div id="simsalabim" style="display: none;">

ANER ikke om det er noe sånt du tenker på, men det scriptet viser "simsalabim" når du trykker på VIS.

 

Ikke noe hokuspokus å skjule den heller.

[hemo]

Eg fekk ikkje heilt til det der, eg...

Det eg tenkte var f.eks. sånn her:

 

Klikk her for å lese korleis

Så kjem det mykje tekst, tabell, lister og bilete. Alt saman er skjult så lenge du ikkje har klikka på "overskrifta". Klikker du ein gong til på overskrifta, så forsvinne elt detta.

 

Så må det kanskje stå noko HTML-kode som avsluttar seksjonen, for det må vera mogeleg å ha tekst og ting etter seksjonen også...

 

Q: I tipset du gav, kor skal teksten som vert skjult/vist stå?

[FuLu]

Javascript:

function trigger_vis(id) {
if(document.getElementById) {
 theElement = document.getElementById(id);
 if(theElement) {
 	if(theElement.className == "hidden") {
   theElement.className = "visible";
   return;
 	}
 	theElement.className = "hidden";
 }
}
}

 

HTML:

<h2 onclick="trigger_vis('section_1234');">Hei dette er en test</h2>
<div id="section_1234" class="hidden">
masse html her, f.eks tables, divs, p, hr and so on...
</div>

 

CSS:

div.hidden {
display: none;
}
div.visible {
display: block;
}

 

Ikke testet koden. En negativ del med eksemplet mitt, er hvis javascript er deaktivert, så vil div'en være hidden.

[hemo]

Fins det enklare måtar å løyse dette, no?

Minst mogeleg kode og størst mogeleg kompatibilitet mot nettlesarar (f.eks. Opera Mini)