Jquery Toggle hide op een div
Ben even bezig met een Toggle hide
Code (php)
1
2
3
2
3
$("button").click(function(){
$("p").toggle();
});
$("p").toggle();
});
In plaats van de paragraaf wil ik een gehele div hiden. Hoe is dit te doen?
Toevoeging op 27/07/2016 15:04:49:
Kon natuurlijk gewoon .div toevoegen. Voor degene die het zoeken:
$("button").click(function(){
$(".jouwdivnaam").toggle();
});
Desgewenst kan ik wel een voorbeeldje in elkaar zetten.
Ik dit geval heb ik hem zo gemaakt
Code (php)
1
2
3
2
3
$("button").click(function(){
$(".temp").toggle();
});
$(".temp").toggle();
});
De button is in dit geval <button>X</button> om de melding te sluiten.
Code (php)
1
$(".temp").toggle();
Hoe kan ik het data-* attribut hier goed voor gebruiken?
Ik heb deze gebruikt om een vakantie melding weer te geven op een homepagina. De div TEMP is een blok met daarin een paragraaf met de tekst wanneer deze dicht zijn. Recht boven in heb ik de <button> geplaatst, zodat deze na het lezen verdwijnt.
Gewijzigd op 27/07/2016 15:40:44 door Jan Graneker
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<div id="div_1">one</div><button class="js-div-toggle" data-target="div_1">clicky</button><br />
<div id="div_2">two</div><button class="js-div-toggle" data-target="div_2">clicky</button><br />
<div id="div_3">three</div><button class="js-div-toggle" data-target="div_3">clicky</button><br />
etc.
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('button.js-div-toggle').click(function(e) {
e.preventDefault();
$('#'+$(this).data('target')).toggle();
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<div id="div_1">one</div><button class="js-div-toggle" data-target="div_1">clicky</button><br />
<div id="div_2">two</div><button class="js-div-toggle" data-target="div_2">clicky</button><br />
<div id="div_3">three</div><button class="js-div-toggle" data-target="div_3">clicky</button><br />
etc.
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('button.js-div-toggle').click(function(e) {
e.preventDefault();
$('#'+$(this).data('target')).toggle();
});
});
//]]>
</script>
</body>
</html>