Javascript - Display style van siblings op 'none' zetten

[BikkelZ]

Ik heb een heel simpel scriptje:

JavaScript:

function hideDiv(deze) { 
    if (document.getElementById) {
        document.getElementById(deze).style.display = 'none'; 
    } 
} 

function showDiv(deze) { 
    if (document.getElementById) {
        document.getElementById(deze).style.display = 'block'; 
    } 
}

Mijn document zit ongeveer zo in elkaar:

HTML:

<div>
level 1
<div>
level 2
</div>
<div>
level 2
<div>
level 3
</div>
<div>
level 3
</div>
<div>
level 3
</div>
</div>
<div>
level 2
</div>
</div>

De bedoeling van de page is dat mensen door een soort vragenstructuur heen kunnen klikken en zo steeds de display style van de divs die daar bij horen op 'block' zetten, of door op een kruisje te klikken weer weg kunnen klikken.

Maar eigenlijk is het wel zo netjes, als iemand een vraag open heeft geklikt, maar dan een vraag aanklikt van dezelfde 'level', dat het antwoord op de andere vraag ook weer automatisch gesloten wordt.

Kortom, de siblings van de layer waar de vraag op staat moeten eerst allemaal dicht gegooid worden, voordat het antwoord (of de volgende keuze) geopend wordt. Kan dit met een soort generieke functie, in plaats van steeds de id's te gebruiken van alle div's?

[ Voor 20% gewijzigd door BikkelZ op 16-02-2005 10:30 ]

[gorgi_19]

* gorgi_19 pakt een tennisracket en pingponged het topic over de schutting heen.

Clientside zaken horen thuis in Webdesign & Graphics

>> Webdesign & Graphics

[Pelle]

Kijk hier eens naar:

object.getElementsByTagName('div')

[Verwijderd]

Je keuze voor het argument deze geeft al bijna aan dat je eigenlijk nog niet van de bijzondere variabele this hebt gehoord. Dat is een verwijzing naar het object waarbinnen de scope zich bevindt.

code:

<a href="http://www.tweakers.net" onclick="alert(this.href);">Voorbeeld</a>

Verder zijn er naast getElementById natuurlijk nog veel meer DOM methods en properties.

[Pelle]

Ben in goeie bui...

code:

<script type="text/javascript">

    function waaa(obj) {
    
        divs = obj.parentNode.getElementsByTagName('div');
        
        for (var i = 0; i < divs.length; i++) {
            divs.item(i).style.display = 'none';
        }
        
    }
    
</script>

<div>

    <a href="#" onclick="waaa(this);">knel</a>
    
    <div>
        melp
    </div>
    
    <div>
        blaat
    </div>
</div>

Daarmee moet je er wel kunnen komen zou ik zeggen

[BikkelZ]

OK laat ik het zo zeggen: de tweede level 2 div, daar vallen drie level 3 divs onder. De links waarmee die op 'none' of 'block' gezet kunnen worden zitten in de level 2 div. Heb je er al een op 'block' staan, en klik je een tweede link aan op level 2, dan moeten alle overige level 3 divs weer op 'none' gezet worden. Dus eigenlijk moet bij iedere klik eerst alles van dezelfde level op 'none' gezet worden en daarna eentje op 'block'.

Een soort van this child div achtige aanroep zoek ik dus, maar daar kom ik niet uit.

Ben in goeie bui...

Die had ik nog niet gezien

[ Voor 14% gewijzigd door BikkelZ op 16-02-2005 10:52 ]

[Verwijderd]

Verwijderd schreef op woensdag 16 februari 2005 @ 10:42:
bijzondere variabele this hebt gehoord.

*kuch* reference

[BikkelZ]

Ben nog even aan het kloten omdat er meer dingen in <div>'s stonden dan alleen de layers die open en dicht moesten, maar daar kom ik verder wel uit.

[Verwijderd]

dus alles op hetzelfde niveau aanspreken? met de IE only method depth() gaat dat wel handig, dus als het IE only is

[js303]

kan je niet een recursieve functie maken die kijkt of er child objects in het huidige object zitten zo ja zet diens display dan op none, etc? heb zelf ooit een delete-functietje gebruikt voor iets dergelijks, zag er zo uit:

code:

function remove_obj(obj) {
    // indien er kindjes in dit object zitten, verwijder die dan eerst
    if (obj.childNodes.length) {
        for (i = 0; i < obj.childNodes.length; i++) {
            remove_obj(obj.childNodes[i]);
        }
    }
    // verwijder vervolgens het object zelf
    obj.parentNode.removeChild(obj);
}

en dan moet je ook nog even checken of nodeName een DIV is bijv...

[ Voor 20% gewijzigd door js303 op 16-02-2005 20:20 ]

[BikkelZ]

Verwijderd schreef op woensdag 16 februari 2005 @ 13:08:
dus alles op hetzelfde niveau aanspreken? met de IE only method depth() gaat dat wel handig, dus als het IE only is

Ik ben geen IE-only fan, maar het wordt op een IE-only intranet gebruikt, dus dat zou kunnen.

Jammer dat obj.parentNode.getElementByClassName('level1','level2','level3') niet werkt / bestaat.

[Verwijderd]

je kan ook gewoon een eigen getElementsByWeetIkVeelWat() method aan je element prototypen, mijn getElementByRegex(prop,regex) is af en toe best nuttig gebleken:

getElementByRegex('className',/level[123]/);

[BikkelZ]

Ik heb het helemaal werkend gekregen

JavaScript:

<script language=javascript type='text/javascript'> 
function showDiv(obj, deze) { 
    divs = obj.parentNode.getElementsByTagName('div');
        
    for (var i = 0; i < divs.length; i++) {
        if (divs.item(i).className == 'level1' | divs.item(i).className == 'level2' | divs.item(i).className == 'level3') {
            divs.item(i).style.display = 'none';
        }
    } 
    if (document.getElementById(deze).style.display == 'block') {
        document.getElementById(deze).style.display = 'none'; 
    } 
    else {
        document.getElementById(deze).style.display = 'block';
    }
}

</script> 

Cascading Stylesheet:

<style type="text/css">
    body {font-family: arial;}
    a:link, a:visited {text-decoration: none; color: #0000DD;}
    a:hover {text-decoration: underline; color: #0000DD;}
    .kruisje {background-color: #0000DD;}
    .inbox {padding: 4px;}
    .level1 {margin: 2px; border-width: 3px; border-color: #bbbbbb; border-style: solid; background-color: #eeeeee; display: none;}
    .level2 {margin: 2px; border-width: 3px; border-color: #888888; border-style: solid; background-color: #dddddd; margin-left: 20px; display: none;}
    .level3 {margin: 2px; border-width: 3px; border-color: #444444; border-style: solid; background-color: #cccccc; margin-left: 20px; display: none;}
    .level4 {margin: 2px; border-width: 3px; border-color: #000000; border-style: solid; background-color: #bbbbbb; margin-left: 20px; display: none;}
</style>