[JS] Div hiden

[shorty]

Ik gebruik een stuk JavaScript om een bepaalde DIV te laten zien bij een onClick. Dat stukje ziet er als volgt uit:

JavaScript:

var plusje = new Image();
imgplus.src = 'plus.gif';
var minnetje = new Image();
imgmin.src = 'min.gif';

function expand(element,figuur) {
    if(element.style.display != '' ) 
    {       
        element.style.display = '';
        figuur.src = imgplus.src;
    }
    else 
    {
        element.style.display = 'block';
        figuur.src = imgmin.src;
    }
}

Ik gebruik de volgende HTML code om de DIV te laten:

code:

<img src="plus.gif" alt="" width="13" height="13" onclick="expand(document.getElementById('logistiek'),this)"/> Klik!

De volgende code gebruik ik logischerwijs om de DIV zijn identiteit te geven:

code:

<div id="logistiek">tekst hier</div>

Nu werkt dit perfect. Het plusje veranderd in een minnetje zodra de DIV wordt weergegeven en veranderd weer terug als de DIV verborgen wordt.

Nu mijn probleem; bij deze code blijft alles wat zegmaar "uitgeklapt" is staan. Dit helpt niet mee aan de overzichtelijkheid van de tekst, de reden dat ik het zo heb gedaan. Het is de bedoeling dat als er een DIV is uitgeklapt dat de overige DIV's die open staan weer dicht worden geklapt zodat je ten alle tijde maar 1 DIV tegelijk weergegeven kan hebben.

Weet iemand hoe ik dit kan aanpakken? Mijn kennis van JavaScript en CSS is helaas niet zo heel groot.

[RaZ]

code:

    else 
    {
        element.style.display = 'none';
        figuur.src = imgmin.src;
    }

Probeer die eens

[Rekcor]

Mijn kennis van JavaScript en CSS is helaas niet zo heel groot.

Ik zou zeggen: kijk eens rond op sites als http://www.pageresource.com/jscript/index2.htm. Dat kost wat tijd, maar 'overall' ben je achteraf minder tijd kwijt, aangezien je veel sneller kunt scripten.

[t-x-m]

JavaScript:

element.style.display = '';     // Bij een lege waarde krijg de eigenschap zijn standaard waarde(block bij een div)
element.style.display = 'none'; // zou moeten werken

[Fuzzillogic]

Houd in een variabele bij welke div als laatste is opengeklapt. Voordat je een nieuwe openklapt, sluit je eerst die div.

JavaScript:

laatsteOpen=null;

..

function klapDicht(element) {
...
}

function klapOpen(element) {
   if (laatsteOpen!==null) {
      klapDicht(laatsteOpen);
   }
   //hier openklappen
   laatsteOpen=element;
}

Maareh, houd je wel rekening met het gegeven dat javascript unobtrusive hoort te zijn? Dwz: een site dient ook te werken als je javascript hebt uitgeschakeld. Voor intranetsites kun je natuurlijk wel javascript eisen.

[Verwijderd]

Ik neem aan dat iedere DIV die je op je pagina hebt een uniek ID mee krijgt.

Zo ja dan kun je de naam van die div in een parameter zetten

JavaScript:

var openDivID = '';

function onclick(element, figuur)
{
toggleDiv(document.getElementByID(openDivID));
toggleDiv(element);
openDivID = element.ID;
}

function toggleDiv(element)
{
//handel hier het uit- en invouwen van je div af
}

zoiets zou kunnen werken

Succes

[shorty]

Fuzzillogic schreef op vrijdag 24 november 2006 @ 09:56:
Houd in een variabele bij welke div als laatste is opengeklapt. Voordat je een nieuwe openklapt, sluit je eerst die div.

JavaScript:

laatsteOpen=null;

..

function klapDicht(element) {
...
}

function klapOpen(element) {
   if (laatsteOpen!==null) {
      klapDicht(laatsteOpen);
   }
   //hier openklappen
   laatsteOpen=element;
}

Maareh, houd je wel rekening met het gegeven dat javascript unobtrusive hoort te zijn? Dwz: een site dient ook te werken als je javascript hebt uitgeschakeld. Voor intranetsites kun je natuurlijk wel javascript eisen.

Stom dat ik daar zelf niet aan gedacht heb, werkt al! Bedankt voor het duwtje in de rug

Het is trouwens voor een intranet, dus ik kan het op deze manier doen gelukkig.

[shorty]

RaZ en t-x-m, die oplossing had ik al geprobeerd... mijn default waarde is al "none" en veranderde juist in "block" bij het klikken. Dit was zodat alles in het begin ingeklapt was.

Rekcor tnx voor de link, altijd interessant!

osnoekie bedankt voor je oplossing, ga daar ook nog ff me spelen... altijd handig die extra kennis!

Ik post over een uurtje ongeveer mijn definitieve oplossing wel, om het allemaal compleet te houden.

[k0ewl]

Mhh, toevallig ben ik ook bezig met dit soort dingen en heb voor de site: http://www.b2ontwerp.nl/eijkelkamp iets bedacht.

Namelijk zodra de pagina geladen wordt, er met onLoad elke DIV die je verbergen wilt in een array zetten. Dan elke keer als je een DIV wilt laten zien, roep je gewoon een functie aan die de rest laat verdwijnen.

[shorty]

JavaScript:

function closeDiv(laatsteOpen) {
    if (laatsteOpen != '')
    {
        laatsteOpen.style.display = '';
        if (type=="MO" || type=="OP") document.images[laatsteOpen.id].src = plusje.src; 
        if (type=="IE") document.images[laatsteOpen.name].src = plusje.src;
    }
}

function openDiv(divid,figuur) {
    var element = document.getElementById(divid);
    if(element.style.display != '' ) 
    {   
        element.style.display = '';
        figuur.src = plusje.src;
    }
    else 
    {
        closeDiv(laatsteOpen);
        element.style.display = 'block';
        figuur.src = minnetje.src;
        laatsteOpen = element;
    }
}

Ik heb nu bovenstaand script. Dit werkt perfect in Firefox, alleen toen ik het probeerde in IE deed ie het niet. Weet iemand hoe het komt? De figuurtjes veranderen wel etc, alleen de DIV wordt niet zichtbaar.

[Fuzzillogic]

Mogelijk geklooi met het type van laatsteOpen (weak typing suckt gewoon). Initialiseer die laatsteOpen eens op null, en controleer dan op nullness ipv op lege string, dus

JavaScript:

if (laatsteOpen !== null) {
}

[shorty]

Gedaan, maar helpt niet. Ik denk zelf dat hij in Internet Explorer op een of andere manier de div niet kan vinden... is dit mogelijk?

[BtM909]

shorty schreef op donderdag 30 november 2006 @ 12:35:
Gedaan, maar helpt niet. Ik denk zelf dat hij in Internet Explorer op een of andere manier de div niet kan vinden... is dit mogelijk?

Met denken alleen ga je het probleem niet tackelen? Krijg je foutmeldingen in IE of in de JS console in FF? Geef eens een online voorbeeld of een kleine testcase, waarbij alleen de relevante code wordt gebruikt om je probleem te kunnen reproduceren

Ik mis weinig zelf-inzet en dat is toch wel iets wat we verwachten van onze lieve users

[shorty]

BtM909 schreef op donderdag 30 november 2006 @ 12:50:
[...]

Met denken alleen ga je het probleem niet tackelen? Krijg je foutmeldingen in IE of in de JS console in FF? Geef eens een online voorbeeld of een kleine testcase, waarbij alleen de relevante code wordt gebruikt om je probleem te kunnen reproduceren

Ik mis weinig zelf-inzet en dat is toch wel iets wat we verwachten van onze lieve users

Was ff gehaast gepost

Ditis het volledige script:

JavaScript:

<html>
<head>
<script language="javascript" type="text/javascript">
if (navigator.userAgent.indexOf("Opera")!=-1
    && document.getElementById) type="OP";
if (document.all) type="IE";
if (document.layers) type="NN";
if (!document.all && document.getElementById) type="MO";
alert(type);

var plusje = new Image();
plusje.src = 'img/explode_plus_b.gif';
var minnetje = new Image();
minnetje.src = 'img/explode_min_b.gif';
var laatsteOpen = null;

function closeDiv(laatsteOpen) {
    if (laatsteOpen !== null) {
        laatsteOpen.style.display = '';
        if (type=="MO" || type=="OP") document.images[laatsteOpen.id].src = plusje.src; 
        if (type=="IE") document.images[laatsteOpen.name].src = plusje.src;
    }
}

function openDiv(divid,figuur) {
    var element = document.getElementById(divid);
    if(element.style.display != '' ) 
    {   
        element.style.display = '';
        figuur.src = plusje.src;
    }
    else 
    {
        closeDiv(laatsteOpen);
        element.style.display = 'block';
        figuur.src = minnetje.src;
        laatsteOpen = element;
    }
}

</script>

<style type="text/css">
    div { display: none; }
</style>

</head>

    <img src="img/explode_plus_b.gif" name="logistiek" alt="" width="13" height="13" onclick="openDiv('logistiek',this)"/> Logistiekmedewerker

    <div id="logistiek">Dit is de tekst die getoond moet worden.</div>

</body>
</html>

Op http://www.zwolluh.nl/test.html staat een voorbeeld. Wanneer je op het plusje klikt vouwt ie uit. Dat gaat ook goed, alleen de DIV die eronder zit laat hij niet zien ("dit is de teskt die getoond moet worden"). Hij laat alleen de koptekst staan.

Daaruit conculudeer ik dat hij de DIV op een of andere manier niet ziet. Alhoewel hij wel in de source staat... Let wel, hij doet het in firefox prima, alleen in IE doet hij het niet.

[user109731]

getElementById(x) geeft in IE ook elementen terug met name="x"... En je img heeft als naam 'logistiek', die word dus gepakt ipv de div. Verander 1 van beiden (name of id) dus naar wat anders

Is een IE-bug, het zou gewoon moeten werken.

[ Voor 22% gewijzigd door user109731 op 30-11-2006 14:09 ]

[Crayne]

Grote prutser schreef op donderdag 30 november 2006 @ 14:07:
getElementById(x) geeft in IE ook elementen terug met name="x"... En je img heeft als naam 'logistiek', die word dus gepakt ipv de div. Verander 1 van beiden (name of id) dus naar wat anders

* Crayne wijst naar script

Er is een reden dat hij zowel zijn img als de div een attribute met waarde "logistiek" heeft meegegeven. Geen goede reden, maar er is een reden.

[Fuzzillogic]

En gooi die archaïsche meuk uit regel 4-9 meteen ook even weg. Dat is niet meer van deze tijd, en bovendien klopt het gewoon niet. Gebruik alleen IDs met getElementById en, zoals gezegd, houd rekening met het feit dat IE de name-attributen en id-attributen in één namespace bij elkaar flikkert.

[mithras]

Hier @ IE6 gaat het gedeeltelijk wel ok:
Dicht->Open: Uitklappen is ok, tekst wordt zichtbaar, + wordt -
Open->Dicht: Dichtklappen is ok, tekst verdwijnt, - wordt +
Dicht->Open: Tweede keer uitklappen geeft een fout en doet niets meer.

Er gaat dus iets mis met het bijhouden of die open of dichtzit: op regel 25: 'document.images[...]' is leeg of geen object, dus bij

document.images["img"+laatsteOpen.name].src = plusje.src;

[shorty]

Hij werkt inmiddels op www.zwolluh.nl/test.html. Bedankt mensen voor de oplossingen, en vooral Grote prutser! Ook maar ff die archaische meuk weg gedaan dan maar

Is d'r een reden voor dat IE dat op deze manier doet?