Menu met jQuery
Hieronder is de code die ik dit moment gebruik. Ook heb ik nog maar 1 van de menu's in de code staan, puur om het een en ander te testen.
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
50
51
52
53
54
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
50
51
52
53
54
<div class="container-fluid" id="menu">
<div class="row">
<div class="col-md-2 col-sm-2 col-2 offset-md-5 offset-sm-5 offset-5">
<div id="weed-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Wiet</p>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-2 col-sm-2 col-2">
<div id="indica-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Indica</p>
</div>
</div>
<div class="col-md-2 col-sm-2 col-2">
<div id="sativa-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Sativa</p>
</div>
</div>
<div class="col-md-2 col-sm-2 col-2">
<div id="hybrid-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Hybrid</p>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="weed-menu">
<div class="row">
<div class="col-md-2 offset-md-5">
<div class="back-btn">
<img class="menu-btn" src="{{assets}}/img/menu-button-weed.png">
</div>
</div>
</div>
</div>
</div>`
<script>
$('#weed-tab').click(function(){
$('#menu').hide();
$('#weed-menu').show();
$('.back-btn').show();
});
$('.back-btn').click(function(){
$('#menu').show();
$('#weed-menu').hide();
});
</script>
<div class="row">
<div class="col-md-2 col-sm-2 col-2 offset-md-5 offset-sm-5 offset-5">
<div id="weed-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Wiet</p>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-2 col-sm-2 col-2">
<div id="indica-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Indica</p>
</div>
</div>
<div class="col-md-2 col-sm-2 col-2">
<div id="sativa-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Sativa</p>
</div>
</div>
<div class="col-md-2 col-sm-2 col-2">
<div id="hybrid-tab">
<a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
<p class="menu-name">Hybrid</p>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="weed-menu">
<div class="row">
<div class="col-md-2 offset-md-5">
<div class="back-btn">
<img class="menu-btn" src="{{assets}}/img/menu-button-weed.png">
</div>
</div>
</div>
</div>
</div>`
<script>
$('#weed-tab').click(function(){
$('#menu').hide();
$('#weed-menu').show();
$('.back-btn').show();
});
$('.back-btn').click(function(){
$('#menu').show();
$('#weed-menu').hide();
});
</script>
Gewijzigd op 19/08/2019 18:34:24 door - Ariën -
https://stackoverflow.com/questions/57513878/is-there-a-jquery-function-that-allowes-me-to-show-and-hide-specific-divs
Toevoeging op 16/08/2019 18:54:19:
Adoptive Solution op 15/08/2019 21:03:35:
Dat is exact mijn post, alleen kwam ik niet uit de oplossingen die ze daar gaven
Dit is precies wat ik bedoel met mijn uitleg. Alleen in dit voorbeeld wordt jquery gebruikt en een bootstrap.js file.
Ik vroeg me af of het ook met 1 functie met jquery alleen kan. Dus 1 functie die voor alle buttons geldt en de div's die er aan zijn gekoppeld met bijvoorbeeld een ID
In deze link een voorbeeld en verdere uitleg qau opzet.
Link: http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/
Gewijzigd op 22/08/2019 17:22:01 door Yoop Overmaat
Ik zit te denken of het mogelijk is om gewoon routes te gebruiken. Die routes laden dan vervolgens componenten in(Div's met de juiste menu opties). Zodat niet alle html van alle menu mogelijkheden op 1 pagina staan. Maar dat het wel ingeladen kan worden. Ik vraag me alleen af of dat wel handig is.