Meerder dropdowns (toggle) op 1 pagina
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
<script type="text/javascript">
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('fast');
});
});
</script>
<script type="text/javascript">
$(function() {
$("[name=dropper]").click(function(){
$('.toHide').hide();
$("#dlk-"+$(this).val()).show('fast');
});
});
</script>
<label class="form"><input id="rdb1" type="radio" name="toggler" value="1" checked /> Dag of <input id="rdb2" type="radio" name="toggler" value="2" /> Periode</label>
<div id="blk-1" class="toHide" style="display:show">
<input type="text" name="start_date1" id="datepicker" class="input" style="width: 100px;">
</div>
<div id="blk-2" class="toHide" style="display:none">
van <input type='text' name='start_date2' id="datepicker1" class="input" style="width: 100px;"> tot <input type='text' name='end_date' id="datepicker2" class="input" style="width: 100px;">
</div>
<label class="form"><input id="locatievraag" type="radio" name="dropper" value="3" checked /> Nee <input id="locatievraag" type="radio" name="dropper" value="4" /> Ja</label>
<div id="dlk-3" class="toHide" style="display:show">
test 1 </div>
<div id="dlk-4" class="toHide" style="display:none">
test 2 </div>
Wie kan me helpen?
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('fast');
});
});
</script>
<script type="text/javascript">
$(function() {
$("[name=dropper]").click(function(){
$('.toHide').hide();
$("#dlk-"+$(this).val()).show('fast');
});
});
</script>
<label class="form"><input id="rdb1" type="radio" name="toggler" value="1" checked /> Dag of <input id="rdb2" type="radio" name="toggler" value="2" /> Periode</label>
<div id="blk-1" class="toHide" style="display:show">
<input type="text" name="start_date1" id="datepicker" class="input" style="width: 100px;">
</div>
<div id="blk-2" class="toHide" style="display:none">
van <input type='text' name='start_date2' id="datepicker1" class="input" style="width: 100px;"> tot <input type='text' name='end_date' id="datepicker2" class="input" style="width: 100px;">
</div>
<label class="form"><input id="locatievraag" type="radio" name="dropper" value="3" checked /> Nee <input id="locatievraag" type="radio" name="dropper" value="4" /> Ja</label>
<div id="dlk-3" class="toHide" style="display:show">
test 1 </div>
<div id="dlk-4" class="toHide" style="display:none">
test 2 </div>
Wie kan me helpen?
Waarom de inline style display:none ? Dat kun je toch gewoon in je css bestand toevoegen aan de toHide class?
Bananen zijn geen Appelen. Ik zie in jouw html geen dropdown (<select>) staan. Dus.. wat moet er nou te voorschijn komen of verborgen worden wanneer er welke keus gemaakt wordt?
Daarbij komt nog dat er verschillende mechanismes bestaan:
Stel je hebt drie elementen die verborgen kunnen worden of weer zichtbaar kunnen worden:
Wil je dan dat er maar één tegelijk zichtbaar wordt of wil je dat ze onafhankelijk van elkaar zichtbaar/verborgen worden?
Gewijzigd op 07/01/2014 15:40:36 door Frank Nietbelangrijk