DHTML DOM hide/ unhide raadsel

[Verwijderd]

Doel: Een wegklap gedeelte binnen een pagina d.m.v. position en visibility
van objecten.
Probleem: Eerste wordt geneste tabel getoond, daarna na twee keer klikken wordt alleen nog tabel1 getoont.

Heeft iemand hier een oplossing voor of referentie.
Ik gebruik nu ie 5.5.

Voorbeeld:

code:

<input onclick="hide_unhide(koe);">

<table>
<tr><td>  
    <span id="koe">
    Tabel1 
        <table>
        <tr><td>  
            Tabel2
        </td></tr>
        </table>   
    </span>
</td></tr>
</table>   

<script language="JavaScript">
function hide_unhide(layer_id){
    if (layer_id.style.visibility == "visible") {
        layer_id.style.visibility ="hidden";
        layer_id.style.position = "absolute";
    }else {
        layer_id.style.position = "relative";
        layer_id.style.visibility = "visible";
    }
}
</script>

<hr>

[Bluestorm]

doe dan eens gewoon een alert van layer_id.style.visibility voor het if statement... dan kun je zien waarom het niet meer werkt.

layer_id is trouwens wel een beetje een rare naam... Je geeft immers een object mee. Eigenlijk mis ik daar bovenin nog iets van hide_unhide(document.getElementById('koe')) dan... maar in IE kan dat blijkbaar...

[Clay]

Ik zou idd een gequote koe doen, en die met ..getElement.. opvragen, dat is wel zo netjes, en dan werkt het ook meteen overal op, niet alleen IE. Verder mag je volgens mij geen table in een span stoppen, en visibility is misschien cascading, maar als je voor geneste elementen specifieke visibility opgeeft overruled dat de visibility van de parent, dus er kan van iets wat hidden is best wat visible zijn, of andersom.

voor de volledigheid ik zou het script in de head stoppen, en het een type="text/javascript" geven ipv een language attribuut. Layer_id is zoals Bluestorm al zei misschien een niet al te logische naam. Het is een span object of misschien straks een id. "Layers" bestaan (puristisch gezien) overigens ook alleen in Netscape 4. Een div is dus b.v. ook eigenlijk geen layer.

[ Voor 6% gewijzigd door Clay op 04-06-2003 20:52 ]

[crisp]

ik snap de position relative/absolute ook niet helemaal; lijkt me een beetje overbodig.
Persoonlijk zou ik display block/none gebruiken met een div ipv een span (hoewel, ligt een beetje aan het effect dat je wilt bereiken).
De reden dat je 2x moet klikken is trouwens dat de 1e keer je style.visibility property leeg is omdat je 'm niet met een inline style expliciet aan het element hebt toegekent.

[ Voor 10% gewijzigd door crisp op 04-06-2003 21:00 ]

[Bluestorm]

Maar wat anders... gezien je position: relative/absolute verandering... heb ik 't idee dat je zoekt naar de display property... die je dan kan switchen tussen 'none' en wat voor display type je ook hebt. (inline voor span)

[Verwijderd]

Bluestorm,Crisp,Clay. Bedankt voor de tips. Heb een uurtje of drie vanmiddag zitten klooien. Dankzij julli: Het beoogte effect is bereikt.
Inderdaad. Het was display property die ik zocht. Ik zal het geheel
nog netjes ..getElement.. gebruiken. Ik heb alles zo kort mogelijk gepost.
Maar in origineel netjes alles gescheiden,css,javascript,html.....

resultaat (en onderaan referentie naar msn):

code:

<input type=checkbox onclick="hide_unhide(koe);">

<div id="koe" style="display:none;">
<table border=black>
<tr><td>  
    Tabel1 
        <table>
        <tr><td>  
            Tabel2
            <input type=checkbox onclick="hide_unhide(schaap);">
        </td></tr>
        </table>   
</td><td><div id="schaap" style="display:none;">Werkt dit?</div></td></tr>
</table>   
</div>

<script language="JavaScript">
function hide_unhide(layer_id){
    if (layer_id.style.display == "block") {
        layer_id.style.display ="none";
    }else {
        layer_id.style.display = "block";
    }
}
</script>

<hr>

http://msdn.microsoft.com...ce/properties/display.asp

[ Voor 27% gewijzigd door Verwijderd op 04-06-2003 21:35 . Reden: referentie toegevoegd ]

[Bosmonster]

Maak er nou nog even dit van en het werkt onder meer dan alleen IE.

code:

<input type=checkbox onclick="hide_unhide('koe');">

<div id="koe" style="display:none;">
<table border=black>
<tr><td>  
    Tabel1 
        <table>
        <tr><td>  
            Tabel2
            <input type=checkbox onclick="hide_unhide'(schaap');">
        </td></tr>
        </table>   
</td><td><div id="schaap" style="display:none;">Werkt dit?</div></td></tr>
</table>   
</div>

<script language="JavaScript">
function hide_unhide(eleId){
   var ele = document.getElementById(eleId);

    if (ele.style.display == "block") {
        ele.style.display ="none";
    }else {
        ele.style.display = "block";
    }
}
</script>

hide_unhide() is overigens een niet zo lekker gekozen naam. Bedenk wat je wilt doen met een functie en in dit geval is het het 'togglen' van display. Noem een functie dan bijvoorbeeld toggleDisplay(eleId).

[B-Man]

Nog korter is dan:

code:

var dsp = document.getElementByID(eleId).style.display;
dsp = (dsp=="block")?"none":"block";

[Bluestorm]

Werkt dat ? volgens mij niet... dacht dat een verandering van dsp niet meer doorwerkte in .....style.display.

[Pelle]

Inderdaad, dat werkt niet. Je bent dan de verwijzing naar het object kwijt, omdat je naar een propertie verwezen hebt.

[r0bert]

Maar het idee is wel duidelijk

JavaScript:

document.getElementByID(eleId).style.display = 
   (document.getElementByID(eleId).style.display == "none") ? "block" : "none";

of dus nav pelles reactie:

JavaScript:

dsp = document.getElementByID(eleId).style;
dsp.display = (dsp.display == "none") ? "block" : "none";

[ Voor 49% gewijzigd door r0bert op 05-06-2003 13:09 ]

[B-Man]

hmmm, dat kan ja. Ging in ieder geval over de kortere notatie, wat jullie/je wel doorhadden.