Jørgen Farum Jensen wrote:
> Rune Jensen skrev:
>> Leder efter en kode til at folde ud og ind en DIV med tekst. Den skal
>> kunne bruges flere gange på samme side. De scripts, jeg har set på,
>> bruger display: none i CSS, hvilket jo vil være et problem, hvis JS
>> ikke understøttes. Så hvis JS er slået fra, skal DIVens content være
>> vist, hvilket vel vil sige, at display: none skal sættes med selve
>> JS-koden (DIVen skal være foldet sammen som udgangspunkt).
>>
>> Nogle idéer til, hvordan det kan laves, også så det er
>> cross-browser-kompatibelt?
>
> Hvis du i sidens stylesheet sætter de aktuelle
> elementers display-egenskab til block, vil de
> som standard blive vist.
>
> Tricket er nu simpelthen at sætte scriptet til at
> skjule disse elementer vha en separat funktion til
> dette:
>
> function closeAll(){
> antal=[antallet af elementer, der skal vises];
> for (i=1;i<antal+1;i++){
> document.getElementById('box'+i).style.display="none";
> }}
> onload=closeAll
>
> Bem. i ovenstående at hvert af de berørte
> elementer har en unik id på formen boxn, hvor
> n repræsenterer et tal i en fortløbende talrække.
>
> En JavaScript-lam browser vil naturligvis
> ikke udløse denne funktion, og vil
> der vise elementerne i standardtilstanden,
> som er display:block;
>
> En guide til hvordan du i øvrigt viser og skjuler
> elementer finder du her:
>
>
http://webdesign101.dk/javascript/visogskjulflere.php
>
og for at få nogle lidt federe "web2.0" effekter - så kan det gøres således:
Kræver selvfølgelig
http://script.aculo.us
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function foldbox(id) {
if($(id).visible()) {
new.Effect.Fade(id);
// Man selvfølgelig bruge en af de mange andre effekter
$('bar').update('Åbn boksen');
}
else {
new.Effect.Appear(id);
// Man selvfølgelig bruge en af de mange andre effekter
$('bar').update('Luk boksen');
}
}
function closebox(id) {
$(id).hide();
$('bar').update('Åbn boksen');
}
windows.onload = closebox('foo');
</script>
<body>
<div id="foo">
Her er lidt tekst
</div>
<a id="bar" onclick="foldbox('foo')">Luk boksen</a></div>