Javascript/css toggle zonder hide() functie

[Asitis]

Ik hoop dat die titel enigzins logisch klinkt.
In den beginnen had ik een simpel scriptje dat een divje vertoonde/verborg a.d.h.v. linkjes in een menu;

code:

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

code:

<a href="javascript:ShowContent('item1'); HideContent('item2'); HideContent('item3');">Item 1</a>

    <div id="item1" style="display:none">
        Tekst blok 1
    </div>

Werkt goed, alleen zie je in de link van Item 1 dat elke andere container (in dit geval item2 en item3) verborgen moeten worden. Dit is niet zo erg als je een stuk of 5 blokken heb.. Maar ik heb nu een situatie waar ik 20 blokken heb, en ze dienen enigzins eenvoudig toegevoegd te kunnen worden.

Nu weet/denk ik dat het mogelijk is om het verbergen van de overige items met javascript te doen. Zodat de hele HideContent functie in de links niet meer nodig is
Mijn vraag is alleen hoe? De ideale situatie is dat er dadelijk blokken aangemaakt kunnen worden met een bepaalde ID, en enkel die ID in de link terugkomt.

Kan iemand van jullie me helpen? Ik loop al uren rond te pluizen op zoekmachines,, Alvast bedankt!

[Verwijderd]

Je inline events verdienen niet echt een schoonheidsprijs. Je kunt veel beter de events met JS aan de links hangen. Google hiervoor op Javascript en events.

Gebruik verder gewoon een array met alle items en toggle die allemaal in een loopje met een geschreven functie. Daarna het gewenste item gewoon weer openklappen?

[Verwijderd]

code:

document.getElementById('itemId').onclick=function(){};

[Verwijderd]

NB: Functienamen trouwens niet met een hoofdletter beginnen; da's een conventie, want hoofdletters zijn er voor klasses (objecten met functies).

NB2: Je language attribute in je script is overbodig.

Oh en dan nóg iets: je checkt overal voor d.length. Is toch helemaal niet nodig? Jij roept die functie toch aan? Dan weet jij hoe je dat moet doen en check jij dus dat je er een string in zet ;-)

[RobIII]

Zeg, Pi3turp, gebruik even de edit knop ( ) als je iets toe te voegen hebt; het topic herhaaldelijk omhoogschoppen is niet nodig.

[Asitis]

aha
Moge het duidelijk zijn dat ik zelf niet zo'n verstand van JavaScript heb. Ik kan het begrijpen en een beetje aanpassen, maar over het algemeen sprokkel ik alles bij elkaar op het web en plak dat samen tot iets werkends. Vandaar dat het ook niet zo netjes is, dus.

Maargoed, de code die jij geeft gaat (als ik het goed begrijp) uit van de ID van het geklikte object, en stopt die in een functie ("toon deze, verberg andere"?). Ik snap de theorie erachter, maar ik kom niet uit de markup.. Kan iemand me helpen?

[ Voor 9% gewijzigd door Asitis op 23-12-2009 15:52 ]

[Verwijderd]

Je hangt dan een click event aan een functie. Je kunt deze dus, mits de html al geladen is, uitvoeren en dan hoef je geen "vieze" a href = javascript dingen meer te doen. Je kunt de link dan gewoon naar "#" of iets anders laten wijzen. Mocht je je niet al te veel in JS willen verdiepen raad ik je eigenlijk aan om een framework zoals jQuery 'ns te bestuderen... Vele anderen zijn je al voor gegaan in dit soort simpele dingen, en het wiel opnieuw uitvinden is ook niet bepaald handig.

Ik zou twee functies maken: hideAll() en show(id)

[ Voor 5% gewijzigd door Verwijderd op 23-12-2009 15:58 . Reden: typo/aanvulling ]

[crisp]

Hou gewoon een referentie aan naar het reeds getoonde menuitem, bijvoorbeeld mbv zoiets:

JavaScript:

function showContent(id)
{
    if (showContent.shown)
        document.getElementById(showContent.shown).style.display = 'none';

    document.getElementById(id).style.display = 'block';

    showContent.shown = id;
}