De PHPhulp kroeg
JQuery show hide
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(function(){
$('.showSingle').click(function(){
$('.toggles').hide();
$('.toggles').slideUp('slow');
$('#togglediv'+$(this).attr('target')).slideToggle('slow');
return false;
});
});
</script>
$(function(){
$('.showSingle').click(function(){
$('.toggles').hide();
$('.toggles').slideUp('slow');
$('#togglediv'+$(this).attr('target')).slideToggle('slow');
return false;
});
});
</script>
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<button class="showSingle" target="showlinks" id="reslinks" type="submit"></button>
<button class="showSingle" target="showvolgen" id="resvolgen" type="submit"></button>
<button class="showSingle" target="showzoek" id="reszoek" type="submit"></button>
<div id="toggledivshowlinks" class="toggles">
div 1
</div>
<div id="toggledivshowvolgen" class="toggles">
div 2
</div>
<div id="toggledivshowzoek" class="toggles">
div 3
</div>
<button class="showSingle" target="showvolgen" id="resvolgen" type="submit"></button>
<button class="showSingle" target="showzoek" id="reszoek" type="submit"></button>
<div id="toggledivshowlinks" class="toggles">
div 1
</div>
<div id="toggledivshowvolgen" class="toggles">
div 2
</div>
<div id="toggledivshowzoek" class="toggles">
div 3
</div>
Gewijzigd op 08/11/2014 19:36:27 door Ferdi R
regel 4: verberg alle div's met de class toggles,
regel 5: slide up alle div's met de class toggles. Heeft geen zin want op regel vier zijn ze al verborgen gemaakt.
regel 7: slideToggle (langzaam te voorschijn komen) van de div met id togglediv.......
Bij de laatste regel komt dus één div te voorschijn als ie verborgen is of wordt verborgen als ie zichtbaar is (Toggle)
Echter wordt de div op regel 4 altijd verborgen en zal deze dus altijd op regel 7 weer te voorschijn komen.
Toevoeging op 09/11/2014 01:08:36:
Je javascript:
regel 4: verberg alle div's met de class toggles,
regel 5: slide up alle div's met de class toggles. Heeft geen zin want op regel vier zijn ze al verborgen gemaakt.
regel 7: slideToggle (langzaam te voorschijn komen) van de div met id togglediv.......
Bij de laatste regel komt dus één div te voorschijn als ie verborgen is of wordt verborgen als ie zichtbaar is (Toggle)
Echter wordt de div op regel 4 altijd verborgen en zal deze dus altijd op regel 7 weer te voorschijn komen.
Voor de duidelijkheid: Toggle laat de div zien als die verborgen is en verbergt hem als ie zichtbaar is.
Omdat je ze allemaal wilt verbergen en dan één wilt openen kun je dan beter geen toggle gebruiken.
Hier jouw voorbeeld wat uitgewerkt: http://codepen.io/anon/pen/VYwLKv
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<button class="showSingle" target="showlinks" type="submit">Links</button>
<button class="showSingle" target="showvolgen" type="submit">Volgen</button>
<button class="showSingle" target="showzoek" type="submit">Zoek</button>
<div id="showlinks" class="showSingle">
div 1
</div>
<div id="showvolgen" class="showSingle hidden">
div 2
</div>
<div id="showzoek" class="showSingle hidden">
div 3
</div>
<button class="showSingle" target="showvolgen" type="submit">Volgen</button>
<button class="showSingle" target="showzoek" type="submit">Zoek</button>
<div id="showlinks" class="showSingle">
div 1
</div>
<div id="showvolgen" class="showSingle hidden">
div 2
</div>
<div id="showzoek" class="showSingle hidden">
div 3
</div>
CSS:
Code (php)
1
2
3
2
3
.hidden {
display:none;
}
display:none;
}
JQuery:
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
$(function(){
$('button.showSingle').click(function() {
// bepaal welke div bij de button hoort
var target = '#' + $(this).attr('target');
// indien de div al zichtbaar is dan geen actie
if($(target).is(':visible'))
return false;
// Alle div's verbergen
$('div.showSingle').slideUp().delay(500);
// En alleen de juiste div openen
$(target).slideDown('slow');
return false;
});
});
$('button.showSingle').click(function() {
// bepaal welke div bij de button hoort
var target = '#' + $(this).attr('target');
// indien de div al zichtbaar is dan geen actie
if($(target).is(':visible'))
return false;
// Alle div's verbergen
$('div.showSingle').slideUp().delay(500);
// En alleen de juiste div openen
$(target).slideDown('slow');
return false;
});
});
Gewijzigd op 12/11/2014 17:58:48 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function(){
$('button.showSingle').click(function() {
// bepaal welke div bij de button hoort
var target = '#' + $(this).attr('target');
// Alle div's verbergen
$('div.showSingle').slideUp().delay(500);
// indien de div al zichtbaar is dan geen actie
if($(target).is(':visible')){
$(target).slideUp('slow');
}else{
// En alleen de juiste div openen
$(target).slideDown('slow');
return false;
}
});
});
$('button.showSingle').click(function() {
// bepaal welke div bij de button hoort
var target = '#' + $(this).attr('target');
// Alle div's verbergen
$('div.showSingle').slideUp().delay(500);
// indien de div al zichtbaar is dan geen actie
if($(target).is(':visible')){
$(target).slideUp('slow');
}else{
// En alleen de juiste div openen
$(target).slideDown('slow');
return false;
}
});
});