Åpne div med javascript

[kongen]

Jeg har 3 forskjellige ting som skal åpne en div ved hjelp av javascript.

Det første er en vanlig link. Når Les mer linken klikkes skal div'en åpne, og den skal lukkes når Lukk linken klikkes.

<a href="#">Les mer</a> <a href="#">Lukk</a>
<div>masse masse tekst</div>

Den andre er radioknapper. Når Les mer knappen klikkes så skal diven åpnes, og lukkes når Lukk knappen klikkes.

Les mer <input name="lesmer" type="radio" /> Lukk <input name="lukk" type="radio" />
<div>masse masse tekst</div>

Den siste er en checkbox. Når den er checked så skal div'en åpnes, og den skal lukkes når den ikke er cheched.

Les mer <input name="" type="checkbox" />
<div>masse masse tekst</div>

Hvordan gjøres dette med javascript?

 

[Camillafr]

Hei, kan vise noen små eksempler. Html'en er litt annerledes enn din, men den burde være grei å skjønne.

Link som viser og skjuler div:

<a href="#" class="toggle-div">Toggle</a>
<div class="content">
Innholdet
</div>

<script type="text/javascript">
$('.toggle-div').click(function() {
$('.content').toggle();
});
</script>

Radio og checkbox er vel egentlig helt lik:

<input type="checkbox" class="toggle-checkbox" />
<div class="content">
Innholdet
</div>

<script type="text/javascript">
$('.toggle-checkbox').change(function() {
$('.content').toggle();
});
</script>

Nå har jeg ikke testet dette, men tror det skal fungere.

 

[Pong]

Nå bruker camillafr visstnok jQuery biblioteket, men det er bare å anbefale.

 

[Camillafr]

Ja, det glemte jeg å skrive.
Tok det egentlig som et selvfølge at han skulle bruke det, men det er jo egentlig ikke det.

 

[kongen]

Takk for svar

Er dette sånn unobtrusive JavaScript?

 

[xdex]

En liten tanke til de som f.eks. bruker dette. Dersom du skal bruke jQuery, vær sikker på at du faktisk skal bruke det til mer enn å bare åpne en div, ellers er det helt ubrukelig. Det er ikke nødvendig å laste inn ett helt rammeverk for noe så enkelt, du vil spare mye resurser på å gjøre dette uten. Evt. bruk noe som http://projects.jga.me/jquery-builder/ - for å unngå unødvendig kode.

 

[kongen]

Jeg skal kun åpne en div, også på gamle IE. Skal man da bruke "ren" javascript?

 

[xdex]

Jeg skal kun åpne en div, også på gamle IE. Skal man da bruke "ren" javascript?

Se f.eks. på dette eksempelet (som ikke er laget av meg), http://jsfiddle.net/ZptpP/

 

[kongen]

Takk Hva hvis jeg ønsker av div'en skal være lukket som default?