Vis/skjul et stykke tekst

Du skal have fat i DHTML/CSS! ;) Men kan da komme med et eksempel...

Meget gerne.

<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .titel {
                background-color: blue;
                color: white;
                font-weight: bold;
                cursor: pointer;
                width: 500px;
            }
            .hiddentext {
                display: none;
                background-color: silver;
                color: black;
                width: 500px
            }
        </style>
        <script type="text/javascript">
            function toggle( elem )
            {
                e = document.getElementById( elem );
                e.style.display = ( e.style.display == 'none' ? 'block' : 'none' );
            }
        </script>
    </head>
    <body>
        <div class="titel" onclick="toggle('test1')">Klik på mig!</div>
        <div class="hiddentext" id="test1">
            dette er en test!
            <? highlight_file( basename( __FILE__ ) ); ?>
        </div>
    <body>
</html>

Det ser umeltbart rigtig godt ud. Jeg kigger på det, og vender tilbage.

Dog ville det gøre det en del nemmere hvis man ikke benytte div, men i stedet en tabel til at vise teksten i, og et link til at trykke på når man ønskede den skulle åbne?

Ahh.. Kan jo lave det som et link blot ved at gøre sådan her:

<a href="#" onclick="toggle('test2')">Klik på mig!</a>

Ja, men det er der jo ingen grund til? Den opfører sig jo allerede som et link? Eller det gør den hos mig i hvert tilfælde ;)

Og med en tabel kan jeg gøre det samme! Smart.

Jeg mangler nu blot en enkelt ting. Det link som jeg trykker på skal gerne skifte mellem "luk" og "åben". Ligesom her på exp.dk ønsker jeg at et billede skal skifte hver gang man trykker.

Ja helt sikkert, men i den situation jeg skal bruge scriptet i, ville en div være meget besværligt.

For lige at opsumere ønsker jeg at billedet "aaben.jpg" skal skifte til "luk.jpg" når man trykker på det.

<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .titel {
                background-color: blue;
                color: white;
                font-weight: bold;
                cursor: pointer;
                width: 500px;
            }
            .hiddentext {
                display: none;
                background-color: silver;
                color: black;
                width: 500px
            }
        </style>
        <script type="text/javascript">
            function toggle( elem )
            {
                e = document.getElementById( elem );
                e.style.display = ( e.style.display == 'none' ? 'block' : 'none' );
            }
        </script>
    </head>
    <body>
    <a href="#" onclick="toggle('test1')"><img src="aaben.jpg" alt=""> Klik på mig!</a>
    <table width="125" border="0" cellpadding="0" cellspacing="0" class="hiddentext" id="test1">
        <tr>
            <td width="125" height="144"> dette er en test!</td>
          </tr>
    </table>
    <body>
</html>

Undskyld jeg blander mig, men ville tilføje noget til dette:

          " Den opfører sig jo allerede som et link? Eller det gør den hos mig i hvert tilfælde ;)"

Det fatter IE ikke, så man bør nok sætte href="#" ;)

pc-help, det fatter min IE da?
Anyway, hvis I vil bruge <a href= Så ville jeg foretrække denne:

<a href="java script:toggle('test1');"><img src="aaben.jpg" alt=""> Klik på mig!</a>

Hvis man laver denne:

<a href="#" onclick="toggle('test1')">

Bør man ændre den til:

<a href="#" onclick="return toggle('test1')">

og i toggle-funktionen lave en "return false;" i slutningen...

jaja, det er jeg klar over.

skørt, har haft det problem sammen med en anden.

jeg havde ikke sat href="" ind, og den brugte ikke a:link fra min css fil :S

Heh, klog IE du har :D

ofirpeter, hvordan er div'en mere besværlig?
Anyway du kan også skifte billedet sådan:

<a href="java script:toggle('test1');"><img id="test1_pic" src="aaben.jpg" alt=""> Klik på mig!</a>

(tilføjet en id til billedet) og ædr funktionen:

        <script type="text/javascript">
            function toggle( elem )
            {
                e = document.getElementById( elem );
                im = document.getElementById( elem + '_pic' );
                hidden = ( e.style.display == 'none' );
                e.style.display = ( hidden ? 'block' : 'none' );
                im.src = ( hidden ? 'aaben.jpg' : 'luk.jpg' );
                return false;
            }
        </script>

Fordi div'en automatisk skifter linje, og det ønsker jeg ikke. Skal helst kunne nøjes med at skjule en enkelt "td".

Gør det nogen forskel om jeg benytter det ene eller andet?

Det virker ellers fuldkommen efter hensigten nu!
Tak for hjælpen!

Det fik jeg sagt for tidligt!

Man skal trykke to gange for at få den til at skifte første gang?
Hvordan undgår jeg det?

En test kan findes her: http://www.ofirpeter.1go.dk/exp/

Prøv at skifte javascriptet ud med dette:

            function toggle( elem )
            {
                e = document.getElementById( elem );
                im = document.getElementById( elem + '_pic' );
                hidden = ( e.style.display == 'none' || e.style.display == '' );
                e.style.display = ( hidden ? 'block' : 'none' );
                im.src = ( !hidden ? 'aaben.jpg' : 'luk.jpg' );
                return false;
            }

Sådan! Nu virker det! Jeg smider lige den endelige kode, hvis andre skulle løbe ind i sprøgsmålet senere:

<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .titel {
                background-color: blue;
                color: white;
                font-weight: bold;
                cursor: pointer;
                width: 500px;
            }
            .hiddentext {
                display: none;
                background-color: silver;
                color: black;
                width: 500px
            }
        </style>
<script type="text/javascript">
            function toggle( elem )
            {
                e = document.getElementById( elem );
                im = document.getElementById( elem + '_pic' );
                hidden = ( e.style.display == 'none' || e.style.display == '' );
                e.style.display = ( hidden ? 'block' : 'none' );
                im.src = ( !hidden ? 'aaben.jpg' : 'luk.jpg' );
                return false;
            }
        </script>
    </head>
    <body>
    <a href="#" onclick="return toggle('test1')"><img id="test1_pic" src="aaben.jpg" alt="">Klik på mig!</a>
    <table width="125" border="0" cellpadding="0" cellspacing="0" class="hiddentext" id="test1">
        <tr>
            <td width="125" height="144"> dette er en test!</td>
          </tr>
    </table>
    <body>
</html>