Avatar billede ch007 Nybegynder
27. maj 2007 - 15:52 Der er 6 kommentarer og
1 løsning

OnKlik Dropdown

http://www.dr.dk/tjenester/programoversigten/w3c/epg.asp

På ovenstående side har DR sådan kan der står noget tekst, dette kan man klikke på og der kommer ekstra tekst frem.

Altså klikker man på en tv-udsendelse, kommer der en beskrivelse nedenunder?

Man kan "lukke" denne igen.

Hvordan laver man det? Jeg har tidl lavet noget lignende men jeg kan med den kode ikke have flere "åbne" på samme tid som man kan her.
Avatar billede w13 Novice
27. maj 2007 - 16:03 #1
Det er i virkeligheden forholdsvist simpelt:
--------------------------------------------
<div onclick="if(document.getElementById('1').style.display='none'){document.getElementById('1').style.display='block';}else{document.getElementById('1').style.display='none';}">Første punkt</div>
<div id="1" style="display: none;">Første underpunkt</div>

<div onclick="if(document.getElementById('2').style.display='none'){document.getElementById('2').style.display='block';}else{document.getElementById('2').style.display='none';}">Andet punkt</div>
<div id="2" style="display: none;">Andet underpunkt</div>
Avatar billede w13 Novice
27. maj 2007 - 16:07 #2
Hov, jeg glemte lige "==" i if'en:
-------------------------------
<div onclick="if(document.getElementById('1').style.display=='none'){document.getElementById('1').style.display='block';}else{document.getElementById('1').style.display='none';}">Første punkt</div>
<div id="1" style="display: none;">Første underpunkt</div>

<div onclick="if(document.getElementById('2').style.display=='none'){document.getElementById('2').style.display='block';}else{document.getElementById('2').style.display='none';}">Andet punkt</div>
<div id="2" style="display: none;">Andet underpunkt</div>
------------------------------------------
Du kan også lave det som funktion:
------------------------------------------
<script language="JavaScript" type="text/JavaScript">
function ShowSubText(id) {
    if (document.getElementById(id).style.display=='none') {
        document.getElementById(id).style.display='block';
    } else {
        document.getElementById(id).style.display='none';
    }
}
</script>

<div onclick="ShowSubText('1');">Første punkt</div>
<div id="1" style="display: none;">Første underpunkt</div>

<div onclick="ShowSubText('2');">Andet punkt</div>
<div id="2" style="display: none;">Andet underpunkt</div>
Avatar billede ch007 Nybegynder
27. maj 2007 - 16:20 #3
Begge dele virker som jeg gerne vil have det!

Super.

Ren teknisk. Hvad er forskellen på de to? De ser ens ud...
Avatar billede w13 Novice
27. maj 2007 - 16:38 #4
Du mener den uden funktion og den med, som jeg postede i mit sidste indlæg?

Den første har hele den lange kode i div'ens "onclick", og den skal derfor sættes ind i onclick'en for hver div, der skal udføre kommandoen.

I andet kodeeksempel har jeg lagt den lange kode op i en funktion:
<script language="JavaScript" type="text/JavaScript">
function ShowSubText(id) {
    if (document.getElementById(id).style.display=='none') {
        document.getElementById(id).style.display='block';
    } else {
        document.getElementById(id).style.display='none';
    }
}
</script>

Denne funktion kan så køres i hver onclick med den simple kommando: ShowSubText('nr')

Derfor bør du nok vælge eksempel 2, da det i længden vil spare dig tid, og da det vil blive langt mere overskueligt. :)
Avatar billede ch007 Nybegynder
27. maj 2007 - 16:43 #5
Tak!
Avatar billede roenving Novice
28. maj 2007 - 09:37 #6
-- bemærk lige at et id _skal_ starte med et bogstav eller _, hvilket vil medføre at mange browsere ikke vil kunne fungere med sådanne ugyldige id'er !-)
Avatar billede olebole Juniormester
30. maj 2007 - 15:23 #7
<ole>

"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")."

- så ikke nogen underscore i begyndelsen  =)

http://www.w3.org/TR/html401/types.html#type-id

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester