Martin formulerede spørgsmålet:
> Fint tak - svaret findes her
>
http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/
>
> Martin
>
> Den 18-01-2011 13:45, Birger Sørensen skrev:
>> Efter mange tanker skrev Martin:
>>> På
http://www.dr.dk/tv/oversigt#side(1) har de en funktion der gør at
>>> ved klik på et programpunkt ruller en beskrivelse ned og bliver der
>>> indtil man igen klikker på punktet.
>>>
>>> Er det javascript/spry kombineret med ccs - og kender I et script der
>>> kan lave noget tilsvarende?
>>>
>>> Martin
>>
>> Ved ikke lige hvordan dr.dk gør, men det kan ret enkelt lade sig gøre
>> med JS : en simepl funktion der toggler visning af et element -f.eks. en
>> div.
>>
>> Birger
Måske...
<a href="javascript:;"
onmousedown="if(document.getElementById('mydiv').style.display ==
'none'){ document.getElementById('mydiv').style.display = 'block';
}else{ document.getElementById('mydiv').style.display = 'none';
}">Toggle Div Visibility</a>
Brug af javascript: er ikke god praksis - brug en meta i stedet, til at
fortælle browseren at default script er javascript:
<meta http-equiv="Content-Script-Type" content="text/ecmascript">
eller
<meta http-equiv="Content-Script-Type" content="text/javascript">
og så hører den her for øvrigt også med
<meta http-equiv="Content-Style-Type" content="text/css">
function ToggleDiv() {
var t_elm = document.getElementById('mydiv');
if ( t_elm) {
if ( t_elm.style.display == 'none') {
t_elm.style.display = 'block';
}
else {
t_elm.style.display = 'none';
}
}
}
<a href="javascript:;" onmousedown="ToggleDiv();">Toggle Div
Visibility</a>
Og det behøver så ikke være et anchor, men man kan bruge alle
elementer.
Javascript bør tildeles unobtrusive.
Så skal elementet der skal klikkes på også have et id id - f.eks.
id="my_click"
Så starter du javascriptet med
window.onload = SetToggleEvent; // bør også tildeles med
addEventlistener() eller attachEvent()
function SetToggleEvent() {
var t_elm = document.getElementById('mydiv');
if ( t_elm) {
if ( t_elm.addEventListener) { // FF
t_elm.addEventListener( 'mousedown', ToggleDiv, false); }
}
else if ( t_elm.attachEvent) { // IE
elm.attachEvent( 'onmousedown', ToggleDiv);
}
else {
t_elm.onmousedown = ToggleDiv;
}
}
}
(Læg mærke til at der *ikke* paranterser i funktionsnavne i
SetToggleEvent)
Så fjerner du alle spor af JS i body i din HTML, og du har et dokument
der virker, har indholdet i HTML, formatteringen i css og
funktionalitet i js - det andet eksempel du gav, er en rodebunke. :')
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk