[JS / CSS]Div verbergen als op andere geklikt word

[pin_point]

Sorry voor de vage topic titel maar weet zosnel ook niet hoe ik het moet noemen

Ik zit met het volgende probleem,
ik heb een website (gecombineerd (x)HTML, CSS en Javascript), hierin heb ik een menutje en deze wil ik met behulp van een 'semi' treeview laten weergeven, dat weergeven en laten sluiten is allemaal al gelukt op het volgende na ik wil dat als er op een volgend kopje wordt geklikt de huidige wordt gesloten

Script:

JavaScript:

function weergeef (nummer)
  {
    var laatzien= document.getElementById("kop"+nummer).style.visibility;
    if (laatzien== 'visible')
    {
      document.getElementById("kop"+nummer).style.visibility = 'hidden';
      document.getElementById("kop"+nummer).style.display = 'none';
    }
    else
    {
      document.getElementById("kop"+nummer).style.visibility = 'visible';
      document.getElementById("kop"+nummer).style.display = 'block';
      document.getElementById("afb_"+nummer).src="plus.gif"
    }
  }

de HTML:

HTML:

                <div id="menu_wrap">
                
                  <div id="kop1_k" onclick="weergeef(1)">
                    <img src="plus.gif" width="12" height="12" id="afb_1" /> linkje
                  </div>
                    <div class="c" id="kop1">
                    <a href="#" target="_self">link</a><br />
                    <a href="#" target="_self">link</a><br />
                    <a href="#" target="_self">link</a>
                    </div>
                
                  <div id="kop1_k" onclick="weergeef(2)">
                    <img src="plus.gif" width="12" height="12" id="plaatje1" /> linkje
                  </div>
                    <div class="c" id="kop2">
                    <a href="#" target="_self">link</a><br />
                    <a href="#" target="_self">link</a><br />
                    <a href="#" target="_self">link</a>
                    </div>
                </div>

als afsluiter CSS:

Cascading Stylesheet:

#menu_wrap
    {
      width:142px;
      padding-left:8px;
      position:relative;
      cursor:pointer;
    }

.c
    {
      height:auto;
      visibility:hidden;
      width:120px;
      text-align:left;
      padding-left:50px;
      display:none;
      float:right;
      margin-right:-1px;
    }

heb hier op GoT al gezocht, wel wat gevonden, maar dat was ook met het openklappen en voor zover ik het begreep niet dichtklapt als je op een andere optie klikt

[Fuzzillogic]

Simpel: houd in een variabele bij welk item je voor het laatst hebt opengeklapt. Die klap je dan dicht, alvorens je de nieuwe openklapt. De variabele laat je dan naar het zojuist opengeklapte element wijzen.

Maar waarom zet je de visibility nog, als je em toch al met display: none onzichtbaar maakt? Nergens nodig voor.

On a sidenote: die <image /> kun je beter vervangen met een CSS backgroundje. Da's tevens makkelijker met het wisselen van een + en - icoontje, want dat gaat dan ook met CSS. En die lijstjes met <a /> zou je in een <ul /> kunnen zetten. Dan heb je een betere HTML-structuur, goed voor de toegankelijkheid.

[ Voor 32% gewijzigd door Fuzzillogic op 15-03-2007 19:43 ]

[pin_point]

Fuzzillogic schreef op donderdag 15 maart 2007 @ 19:36:
..*knip*..

Bij die dubbele hide & view optie heb je gelijk, heb ik hier alweer aangepast.

Met die afbeeldingen in CSS ga ik aanpassen als het script goed werkt, zelfde geld voor de linkjes

Weer terug naar de eerste hint die je gaf met het opslaan in een variabele.
Heb daar de volgende variabele aangemaakt

var onthoud = document.getElementById("kop"+nummer).style.display;

eerst de volgende functie er gelijk onder geplakt (werkt niet )
if (onthoud == 'block')
{
document.getElementById("kop"+nummer).style.display = 'none';
}

daarna _voordat_ na het else statement de functie wordt aangeroepen om de betreffende DIV te laten zien werkt eveneens niet

[BtM909]

Lees eens goed wat er staat:

houd in een variabele bij welk item je voor het laatst hebt opengeklapt.

---

En zoals je hier kan lezen: Overzicht van UBB-codes, kan je code tussen speciale [code=][/] tags zetten, wat de leesbaarheid ten goede komt. Heb ze in je startpost inmiddels aangepast

[ Voor 48% gewijzigd door BtM909 op 15-03-2007 19:59 ]

[pin_point]

ja zag em >.<

is bezig met wijzigen van source hier,

edit:
[knip]

edit2:
Ik heb het uiteindelijk voor elkaar gekregen, maar niet met het opslaan van de vorige DIV ID, maar op de meest simpele manier, met de variabele onthoud een boolean 1 ingezet als er op een div geklikt wordt, maar volgens mij is de volgende IF functie niet helemaal correct, ik hoef _nergens_ in het document "onthoud" te definieëren.

JavaScript:

                  if ( 'onthoud' != 0 )
                    {
                      document.getElementById("kop1").style.visibility = 'hidden';
                      document.getElementById("kop2").style.visibility = 'hidden';
                      document.getElementById("kop3").style.visibility = 'hidden';
                      document.getElementById("kop4").style.visibility = 'hidden';
                      document.getElementById("kop5").style.visibility = 'hidden';
                      
                      document.getElementById("kop1").style.display = 'none';
                      document.getElementById("kop2").style.display = 'none';
                      document.getElementById("kop3").style.display = 'none';
                      document.getElementById("kop4").style.display = 'none';
                      document.getElementById("kop5").style.display = 'none';
                      
                      document.getElementById("afb_1").src = '/images/plus.gif';
                      document.getElementById("afb_2").src = '/images/plus.gif';
                      document.getElementById("afb_3").src = '/images/plus.gif';
                      document.getElementById("afb_4").src = '/images/plus.gif';
                      document.getElementById("afb_5").src = '/images/plus.gif';
                  }

wazig, maar het werkt als een trein

alleen ben ik zelf niet zo te spreken van deze 15 regeles extra code, javascript is alweer een tijdje geleden en volgens mij moet het mogelijk zijn om iets met een array te doen?

[ Voor 158% gewijzigd door pin_point op 16-03-2007 10:47 ]

[marty]

alleen ben ik zelf niet zo te spreken van deze 15 regeles extra code, javascript is alweer een tijdje geleden en volgens mij moet het mogelijk zijn om iets met een array te doen?

Hoeft niet eens met een array, kan gewoon met een for-loopje:

JavaScript:

        if ( 'onthoud' != 0 )
        {
            for (var x=1; x<=5; x++)
            {
                document.getElementById('kop'+x).style.visibility = 'hidden';
                document.getElementById('kop'+x).style.display = 'none';
                document.getElementById('afb_'+x).src = '/images/plus.gif';
            }
        }

Waarom zet je trouwens zowel de display op none als de visibility op hidden? Die visibily is overbodig lijkt me.

[pin_point]

Harstikke bedankt iedereen alles werkt naar behoren

en m.b.t. ---.style.display en ---.style.visibility, jullie hebben gelijk, soms ben je te koppig om iets dubbel te definieëren.