javascript hide or show
Ik zit nu de hele ochtend te staren naar een stukje javascript (jquery). Mn bedoeling is dat een divje getoond wordt wanneer een checkbox aangevinkt is en weer wordt verborgen (hide) wanneer de checkbox uitgevinkt is.
De onderstaande code werkt goed wanneer ik een checkbox aanklik en direct weer uitklik.
Echter, wanneer ik bv checkbox 1 aanzet, dan checkbox 2 aanvink (dan verschijnen 2 divjes) en dan checkbox 1 uitvink, verdwijnt de div die is verschenen bij het klikken op checkbox 1 niet.
Ik snap niet waar het fout gaat.
Dit is de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
//Hide div with class extra
$(".extra").css("display", "none");
// Add onclick handler to checkbox with class checkme
$(".checkme").click(function(){
// put the value for the id of this checkbox in var tonen
var tonen = this.id;
// If checked
if ($(".checkme").is(":checked")) {
//show the hidden div that has a class extra and with the same id as the checked checkbox
$(".extra[id=" + tonen + "]").show("fast");
}
else {
//otherwise, hide it
$(".extra[id=" + tonen + "]").hide("fast");
}
});
});
//Hide div with class extra
$(".extra").css("display", "none");
// Add onclick handler to checkbox with class checkme
$(".checkme").click(function(){
// put the value for the id of this checkbox in var tonen
var tonen = this.id;
// If checked
if ($(".checkme").is(":checked")) {
//show the hidden div that has a class extra and with the same id as the checked checkbox
$(".extra[id=" + tonen + "]").show("fast");
}
else {
//otherwise, hide it
$(".extra[id=" + tonen + "]").hide("fast");
}
});
});
Hoe maak ik dat steeds direct de div verdwijnt/verschijnt wanneer ik de corresponderende checkbox aan / uit vink.
Tips of aanwijzingen?
@Karl: toggle moet zeker ook kunnen....als beginner vond ik dit al heel mooi bij elkaar gegoogled.....maar dan moet nog steeds mn if else goed werken toch? Daar zit nu hoe dan ook iets fout
@Mitchell: dan snap ik toch de if else zoals ik em nu heb niet helemaal goed. Hoe controleer ik dan op uitvinken? In regel 10 staat toch zoiets als "if aangevinkt" en daarna in regel 14 "else"....dat zou toch voldoende moeten zijn.....wat zou ik dan moeten toevoegen?
Of: hoe kan ik expliciet controleren op 'uitvinken'?
Had ik toevallig gister gemaakt, dit is makkelijk om te bouwen in jouw checkbox situatie .. misschien dat je er iets aan hebt ;)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
function hide(element,div)
{
document.getElementById(div).style.display='none';
document.getElementById('show').style.display='';
element.style.display='none';
}
function show(element,div)
{
document.getElementById(div).style.display='';
document.getElementById('hide').style.display='';
element.style.display='none';
}
</script>
<button style="width:100px;" onclick="hide(this,'tekst');" id="hide">Hide</button>
<button style="width:100px; display:none;" onclick="show(this,'tekst');" id="show">Show</button>
function hide(element,div)
{
document.getElementById(div).style.display='none';
document.getElementById('show').style.display='';
element.style.display='none';
}
function show(element,div)
{
document.getElementById(div).style.display='';
document.getElementById('hide').style.display='';
element.style.display='none';
}
</script>
<button style="width:100px;" onclick="hide(this,'tekst');" id="hide">Hide</button>
<button style="width:100px; display:none;" onclick="show(this,'tekst');" id="show">Show</button>
Gewijzigd op 01/01/1970 01:00:00 door Jaron T
Om het topic af te kunnen ronden:
Toch aan de slag met Karl zijn tip om dit toch maar via 'toggle' te doen. Ik zag pas na een tijdje in dat dat veel voordeel biedt: door het 'display' te togglen heb ik die (voor mij) ingewikkelde ckeck op aangevinkt of uitgevinkt niet nodig. Immers op een klik laat ik em togglen.
Verder wilde ik het graag zo, dat de code eenvoudig generiek te maken is: dat ie het ook doet bij 10 checkboxes met 10 verborgen stukjes.
De javascript kun je eenvoudig in een separaat bestand plaatsen:
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(function(){
// newbies: the ^ means "begins with"
// alle <p> met een class die begint met extra worden verborgen
$('p[class^=extra]').css("display", "none");
// als er geklikt wordt op element met class check
$(".check").click(function(){
// variabele declareren om de juiste class te kunnen aanroepen
var a = 'extra' + this.id;
// de class togglen
$("."+a).toggle();
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" class="check" id="1" name="eerste" value="Bike" />
<br/>
<p class="extra1">
eerste
</p>
<input type="checkbox" class="check" id="2" name="tweede" value="Car" />
<br/>
<p class="extra2">
tweede
</p>
</form>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(function(){
// newbies: the ^ means "begins with"
// alle <p> met een class die begint met extra worden verborgen
$('p[class^=extra]').css("display", "none");
// als er geklikt wordt op element met class check
$(".check").click(function(){
// variabele declareren om de juiste class te kunnen aanroepen
var a = 'extra' + this.id;
// de class togglen
$("."+a).toggle();
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" class="check" id="1" name="eerste" value="Bike" />
<br/>
<p class="extra1">
eerste
</p>
<input type="checkbox" class="check" id="2" name="tweede" value="Car" />
<br/>
<p class="extra2">
tweede
</p>
</form>
</body>
</html>