Javascript show/hide meerdere divs

[Bas112]

Beste Leden,

Ik ben een hobbiest met enige HTML, CSS en PHP kennis. Helaas behoort Javascript hier niet toe. Tot op heden heb ik hier ook nauwelijks gebruik van gemaakt waardoor mijn kennis nihil is.

Het kan zijn dat ik niet de juiste zoekworden heb gebruikt, maar het aantal snippets op het internet was nogal gering. De meeste scripts waren zeer eenvoudige show/hide functies zoals je ziet bij FAQ pagina's (uitklappen van een antwoord). In mijn geval wil ik de content van één div aansturen d.m.v. een onClick functie uit het hoofdmenu.

Bijv:
- Hoofdmenu: (1)leden (2)wedstrijden
- Context div: (1) Leden ovezicht - Lid aanmaken (2) Wedstrijden overzicht - Wedstrijd aanmaken

Vanuit de topbar kan er dus een item (leden of wedstrijden) aangeklikt worden. Vervolgens toont het submenu de bijbehorende links. Het probleem is echter dat als je op de huidige link uit het hoofdmenu klikt én actief is, de subbar verdwijnt, dit is lelijk voor de opmaak en voelt vreemd aan. Zodra je het niet-geselecteerde item uit het hoofdmenu aanklikt, dan is er geen probleem.

De gewenste oplossing zou zijn:
- Indien de huidige link uit het hoofdmenu reeds is geselecteerd, de onClick functie ongedaan maken zodat de functie niet aangeroepen wordt (HTML)
- De link blijft klikbaar maar de functie detecteert allereerst of deeze reeds is geselecteerd en zodra deze gelijk zijn, dan return false (JS).

Mijn voorkeur gaat uit naar de laatsgenoemde oplossing, dus een controlle inbouwen in de JS. Kan iemand mij in de juiste richting helpen?

code:

function menuContext (target)
{
    
    var artz = document.getElementsByClassName('ribbon_context_item');
    var targ = document.getElementById(target);  

    var isVis = targ.style.display == 'block';
      
    for(var i=0; i <artz.length; i++)
    {
        artz[i].style.display = 'none';
    }

    targ.style.display = isVis ? 'none' : 'block';
  }

Hoofd menu

code:

 <div class="ribbon_item" onClick="menuContext('leden(')">
        <img src="../IMG/icons/ribbon/relations.png">
        <p>Ledenbeheer</p>
    </div>

Sub-menu

code:

    <div id="leden" class="ribbon_context_item" style="display: block">
        Overzicht | Lid toevoegen | Statistieken
    </div>

Ik hoop iets te leren dus een linkje in de goede richting zou mij enorm helpen

[thlst]

Staat dit ook in het origineel ?

code:

"menuContext('leden(')"

[Bas112]

Hi,

Nee. Ik heb voor dit topic last-minute een wijziging doorgevoerd in de naamgeving zodat het overeenkomt met het voorbeeld. De single quote staat goed.

De functie wordt bij een onClick aangeroep en doet wat het moet doen, maar nog niet naar mijn wens.

[RM-rf]

je wil dus de variabele 'target' opslaan in een globale variabele (bv genaamd 'active_target') en dan voor het uitvoeren van die functie controleren of misschien 'target' en 'active_target' gelijk zijn

code:

var active_target = false;
function menuContext (target)
{
    if (active_target === target)   return;
    else active_target = target;

     /// ... rest van je code
  }

[Voor 30% gewijzigd door RM-rf op 14-03-2021 19:29]

[Bas112]

RM-rf,

Ah, zeer eenvoudig maar ontzettend bedankt!

Mochten er mensen nog op zoeken, bijgaand de code voor de volledigheid:

code:

var active_target = false;

function menuContext (target)
{
    if (active_target === target)   
    {
        return;
    }
    else 
    {
        active_target = target;
        
        var artz = document.getElementsByClassName('ribbon_context_item');
        var targ = document.getElementById(target);  

        var isVis = targ.style.display == 'block';
        
        for(var i=0; i <artz.length; i++)
        {
            artz[i].style.display = 'none';
        }

        targ.style.display = isVis ? 'none' : 'block';
    }
}

HTML

code:

<div class="ribbon_item" onClick="menuContext('leden')">
        <img src="../IMG/icons/ribbon/relations.png">
        <p>Ledenbeheer</p>
    </div>


  <div id="leden" class="ribbon_context_item" style="display: block">
        Overzicht | Lid toevoegen | Statistieken
    </div>

[S_paul]

Hallo,

Wat een toeval! Ik zit met een soortgelijk probleem, maar helaas is de hier getoonde oplossing voor mij niet bruikbaar. Ik wil nl. met 1 klik meerdere li's zichtbaar/onzichtbaar maken. Geen div's dus, want ik werk met een responsief ontwerp en de lijst met li's die uitgeklapt wordt, moet na elke regel kunnen worden afgebroken (en overlopen in een volgende kolom). Dus:

Aarde
Item 1.1
Item 1.2
Item 1.3
Astronomie
Item 2.1
Item 2.2
Item 2.3
Etc.

De begintoestand is:

Aarde
Astronomie
Etc.

Klikken op Aarde moet geven:

Aarde
Item 1.1
Item 1.2
Item 1.3
Astronomie
Etc.

Daarna moet klikken op Astronomie opleveren:

Aarde
Astronomie
Item 2.1
Item 2.2
Item 2.3
Etc.

De items van Astronomie moeten dus zichtbaar worden EN de items van Aarde moeten verdwijnen.

Ik weet dat ik de afzonderlijk li's zichtbaar kan/moet maken met:
document.getElementsByClassName()

Dit is wat ik tot nu toe heb (en dat kan vast korter):

code:

<style>
.aarde, .astronomie, .universum
    {
    display: none;}
</style>

code:

<script>
function showAarde()
    {
    var x = document.getElementsByClassName("aarde");
    var i;
    for (i = 0; i < x.length; i++)
        {
        x[i].style.display = "block";}
}

function showAstronomie()
    {
    var x = document.getElementsByClassName("astronomie");
    var i;
    for (i = 0; i < x.length; i++)
        {
        x[i].style.display = "block";}
}

function showUniversum()
    {
    var x = document.getElementsByClassName("universum");
        document.getElementsByClassName('aarde')[0].style.visibility = 'hidden';
    var i;
    for (i = 0; i < x.length; i++)
        {
        x[i].style.display = "block";}
}
</script>

code:

<a href="#" onClick="showAarde();">Aarde</a>

<li class="aarde">Aarde 01</li>
<li class="aarde">Aarde 02</li>
<li class="aarde">Aarde 03</li>
<li class="aarde">Aarde 04</li>
<li class="aarde">Aarde 05</li>

<a href="#" onClick="showAstronomie();">Astronomie</a>

<li class="astronomie">Astronomie 01</li>
<li class="astronomie">Astronomie 02</li>
<li class="astronomie">Astronomie 03</li>
<li class="astronomie">Astronomie 04</li>
<li class="astronomie">Astronomie 05</li>

<a href="#" onClick="showUniversum();">Universum</a>

<li class="universum">Universum 01</li>
<li class="universum">Universum 02</li>
<li class="universum">Universum 03</li>
<li class="universum">Universum 04</li>
<li class="universum">Universum 05</li>

Maar hoe laat ik tegelijkertijd de andere li's verdwijnen? Zou super zijn als iemand mij verder kan helpen. Ik wil geen JQuery gebruiken...

Groetjes, Shelley

[Bas112]

@RM-rf nog een aanvullende vraag; kan ik bij een window onload detecteren welke id gelijk is aan block (zichtbaar)? Deze zou ik dan ook de status als active_target kunnen geven zodat het probleem zich niet voordoet direct na het inladen van de pagina.

Daarna werkt het perfect... begrijp je wat ik bedoel?

EDIT: ik heb het zelf als volgt opgelost. De eerste div stond standaard op block en de rest op none. Ik heb alle div's nu op none gezet en vanuit een body onLoad zet ik de eerste div nu op block. Hiermee is het opgelost. Dank!

[Voor 27% gewijzigd door Bas112 op 14-03-2021 23:09]

[S_paul]

Ik ben er inmiddels achter. Voor de liefhebbers: zo laat je meerdere li's of div's ineens verdwijnen:

code:

    var x = document.querySelectorAll(".aarde,.astronomie,.universum");
    var i;
    for (i = 0; i < x.length; i++)
        {
        x[i].style.display = "none";}

[CurlyMo]

S_paul schreef op maandag 15 maart 2021 @ 09:27:
Ik ben er inmiddels achter. Voor de liefhebbers: zo laat je meerdere li's of div's ineens verdwijnen:

code:

    var x = document.querySelectorAll(".aarde,.astronomie,.universum");
    var i;
    for (i = 0; i < x.length; i++)
        {
        x[i].style.display = "none";}

Een list item hoort niet op zichzelf te staan, maar onderdeel te zijn van een genummerd of ongenummerde lijst.
https://www.w3schools.com/html/html_lists.asp

Dan hoef je maar één hoofd element aan en uit te zetten.