Show en hide meerdere divs

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

G Jansma

G Jansma

08/09/2017 13:09:32
Quote Anchor link
Ik wil op mijn website meerdere menu'tjes maken, waardoor de inhoud van de div wijzigt. De div wordt getoond door middel van CSS display block en none. Zoals in het onderstaand voorbeeld, maar dan meerdere op dezelfde pagina. Ik weet alleen niet hoe ik dat kan wijzigen in de javascript, daarvoor is mijn kennis daarvan te beperkt. Nu lukt dat namelijk niet. Iemand die me daarmee kan helpen?

http://blogs.html5andcss3.org/show-and-hide-multiple-div-using-javascript/

De code daarvan:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<title>Show and hide multiple DIV using JavaScript</title>
<style>
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
</style>
<script>
    var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
</script>
</head>
<body>
<div class="main_div">
<div class="buttons">
<a href="#" onclick="toggleVisibility('Menu1');">Menu1</a> | <a href="#" onclick="toggleVisibility('Menu2');">Menu2</a> | <a href="#" onclick="toggleVisibility('Menu3');">Menu3</a> | <a href="#" onclick="toggleVisibility('Menu4');">Menu4</a>
</div>
<div class="inner_div">
<div id="Menu1">I'm container one</div>
<div id="Menu2" style="display: none;">I'm container two</div>
<div id="Menu3" style="display: none;">I'm container three</div>
<div id="Menu4" style="display: none;">I'm container four</div>
</div>
</div>
</body>
</html>
 
PHP hulp

PHP hulp

25/04/2024 18:11:30
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/09/2017 12:19:55
Quote Anchor link
Wil je dit met pure javascript (only) doen of mag jQuery gebruikt worden?

Ik zou overigens die inline styling er uit halen en in CSS zetten.
 
G Jansma

G Jansma

09/09/2017 14:27:44
Quote Anchor link
jQuery mag ook, maar ik ben zelf niet zo bekend met javascript/jquery.

Die code komt dus regelrecht uit die demo. Die styling haal ik er nog uit, maar ik ben vooral op zoek naar een werkend voorbeeld wat ik vervolgens zelf kan gaan gebruiken.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/09/2017 15:03:35
Quote Anchor link
Goed. In mensentaal: Als één div zichtbaar is dan moet deze verborgen worden en een andere getoond worden. Echter is het niet zo belangrijk welke div er verborgen moet worden omdat als je die ene die zichtbaar is verbergt dan zijn ze allemaal verborgen (nét voordat je een nieuwe div zichtbaar maakt) dus kun je ze net zo goed allemaal verbergen.

Alle div's verbergen kan het makkelijkste als je een class attribuut toevoegt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div class="menu" id="Menu1">I'm container one</div>
<div class="menu" id="Menu2">I'm container two</div>
<div class="menu" id="Menu3">I'm container three</div>
<div class="menu" id="Menu4">I'm container four</div>


Met getElementsByClassName("menu") krijg je nu een array (lijst) met alle elementen die die class hebben. Dit zijn er vier in jouw voorbeeld. Vervolgens hebben we een for lus nodig die ze één voor één op display: none zet.

Nu zijn alle div's verborgen en moet je nog één div zichtbaar maken. Dit doen we aan de hand van het id.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
function toggleVisibility(id) {
  /* hide all div's */
  var divs = document.getElementsByClassName("menu");
  for(var i = 0 ; i < divs.length ; i++) {
    divs[i].style.display = "none";
  }
  
  /* show selected div */
  var div = document.getElementById(id);
  div.style.display = "block";
}


Een werkend voorbeeldje: https://codepen.io/anon/pen/dzxOxv
Gewijzigd op 09/09/2017 15:05:49 door Frank Nietbelangrijk
 
G Jansma

G Jansma

09/09/2017 16:08:25
Quote Anchor link
Behoorlijk verhelderend. Ik heb even dat werkend voorbeeldje gebruikt. Maar als ik dat dus vaker dan één keer op dezelfde pagina wil gebruiken, zonder dat ik 10x die javascriptcode moet vervangen, hoe kan ik dat dan toepassen?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.menu {
  display: none;
}

#Menu1 {
  display: block;
}
</style>

<script>
function toggleVisibility(id) {
  /* hide all div's */
  var divs = document.getElementsByClassName("menu");
  for(var i = 0 ; i < divs.length ; i++) {
    divs[i].style.display = "none";
  }
  
  /* show selected div */
  var div = document.getElementById(id);
  div.style.display = "block";
}
</script>

<div>Nr 1</div>
<a href="#" onclick="toggleVisibility('Menu1');">Menu1</a>
<a href="#" onclick="toggleVisibility('Menu2');">Menu2</a>
<a href="#" onclick="toggleVisibility('Menu3');">Menu3</a>
<a href="#" onclick="toggleVisibility('Menu4');">Menu4</a>

<div class="menu" id="Menu1">I'm container one</div>
<div class="menu" id="Menu2">I'm container two</div>
<div class="menu" id="Menu3">I'm container three</div>
<div class="menu" id="Menu4">I'm container four</div>

<div>Nr 2</div>
<a href="#" onclick="toggleVisibility('Menu5');">Menu1</a>
<a href="#" onclick="toggleVisibility('Menu6');">Menu2</a>
<a href="#" onclick="toggleVisibility('Menu7');">Menu3</a>
<a href="#" onclick="toggleVisibility('Menu8');">Menu4</a>

<div class="menu" id="Menu5">I'm container one</div>
<div class="menu" id="Menu6">I'm container two</div>
<div class="menu" id="Menu7">I'm container three</div>
<div class="menu" id="Menu8">I'm container four</div>
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/09/2017 16:58:57
Quote Anchor link
Bijvoorbeeld https://codepen.io/anon/pen/xLvqwW
 
G Jansma

G Jansma

10/09/2017 09:50:28
Quote Anchor link
Precies waar ik naar op zoek was, thanks! Altijd lastig dat je precies voor ogen hebt wat je wilt, maar geen idee hebt hoe het heet of waar je op moet zoeken.

Edit:
Ik heb nog wel twee vraagjes.

1. Hoe kan ik de geklikte div/button met CSS opmaken? Kan je dat ook aangeven dat er dan een extra class moet worden toegevoegd? Ik heb het nu als volgt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<a href="#!" onclick="toggleVisibility('<?php echo "menu$x"; ?>','<?php echo "menu$x$key2"; ?>');">
<div class='button'><?php echo $tekst; ?></div></a>


2. Als ik zo'n ding met target href="#" aanklik schiet hij naar de top van de pagina. Dat is niet de bedoeling.

Edit2: Punt 2 al opgelost met "#!"
Gewijzigd op 10/09/2017 10:35:13 door G Jansma
 
Frank Nietbelangrijk

Frank Nietbelangrijk

10/09/2017 17:26:31
Quote Anchor link
1. zeker je kan meerdere classnamen toevoegen: class="menu menuA"
2. door return false; aan het einde van de functie toe te voegen volgens mij. Ik heb dit in codepen aangepast.
 
G Jansma

G Jansma

10/09/2017 17:49:07
Quote Anchor link
Ik snap dat ik op die manier met CSS een extra class kan toevoegen ja. Maar in dit geval klik ik op de div 'button', met Menu1, Menu2, Menu3, Menu4 erin als tekst zeg maar. Als ik op de button van Menu2 klik wil ik dat die div de class 'active' erbij krijgt. En dat normaal alle eerste opties 'active' zijn. Maar ik weet niet hoe ik dat met javascript moet vormgeven.

Ik denk wel dat ik in dat geval de buttons ook van een nummertje moet voorzien?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

10/09/2017 20:22:18
Quote Anchor link
Dan zou ik JQuery willen aanraden.
https://codepen.io/anon/pen/xLvqwW

Vergeet niet dat je op je eigen pagina jquery moet invoegen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
 
G Jansma

G Jansma

10/09/2017 21:51:30
Quote Anchor link
Helemaal perfect! Ik moet het nog even implementeren, maar ik denk dat het nu precies is wat ik nodig heb. Enorm bedankt voor je hulp.

Toevoeging op 11/09/2017 13:54:48:

Ik heb nog twee punten die nog niet helemaal goed zijn.

1. De pagina verspringt namelijk als je klikt op een knop. Ik heb er even wat enters voor en achter gezet om het te verduidelijken, maar de pagina behoudt dus niet zijn positie als je op een knop klikt.

https://codepen.io/anon/pen/GMKZWq

2. Bij een klik op een knop komt er nu #tab22 in de url, dat is niet zo'n fraai gezicht vind ik. Ook bij een mouse-over onderin de browser. Kun je die tab ook meegeven met een id binnen de a, en href # doen?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

12/09/2017 00:18:46
Quote Anchor link
sorry ik zag net heel toevallig dat je nog een vraag had toegevoegd.

Je kunt event.preventDefault(); gebruiken om te voorkomen dat de link echt werkt

Let op dat je wel de parameter event in de click(function()) plakt op regel 2

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$( document ).ready(function() {
  $(".menu a").click(function(event) {
    
    // voorkom het uitvoeren van de snelkoppeling
    event.preventDefault();
    
    var tab = $(this).attr('href');
    var container = $(tab).closest('.tab-container');
    var menu = $(this).closest('.menu');

    /* hide divs and show one div */
    container.children('div').hide();
    $(tab).show();
    
    /* remove class active and add class to current menuitem */
    menu.find('a').removeClass('active');
    $(this).addClass('active');
  });
});
Gewijzigd op 12/09/2017 00:19:54 door Frank Nietbelangrijk
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.