Show en hide meerdere divs
http://blogs.html5andcss3.org/show-and-hide-multiple-div-using-javascript/
De code daarvan:
Code (php)
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
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>
<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>
Ik zou overigens die inline styling er uit halen en in CSS zetten.
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.
Alle div's verbergen kan het makkelijkste als je een class attribuut toevoegt:
Code (php)
1
2
3
4
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>
<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)
1
2
3
4
5
6
7
8
9
10
11
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";
}
/* 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
Code (php)
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
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>
.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>
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)
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
2. door return false; aan het einde van de functie toe te voegen volgens mij. Ik heb dit in codepen aangepast.
Ik denk wel dat ik in dat geval de buttons ook van een nummertje moet voorzien?
https://codepen.io/anon/pen/xLvqwW
Vergeet niet dat je op je eigen pagina jquery moet invoegen:
Code (php)
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
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?
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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');
});
});
$(".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