[jQuery] show / hide
Ik heb meerdere items die ik met een show knop wil openen en dan met een close knop weer weg kunnen drukken.
Nou ben ik dankzij wat zoekwerk online zover:
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
<button id="show_1">Show it 1</button>
<p id="p_1" style="display: none">Hello 1<button id="close_1">close</button></p>
<br/>
<button id="show_2">Show it 2 </button>
<p id="p_2" style="display: none">Hello 2<button id="close_2">close</button></p></p>
<br/>
<button id="show_3">Show it 3</button>
<p id="p_3" style="display: none">Hello 3<button id="close_3">close</button></p></p>
<script>
$(document).ready(function() {
$("button").click(function() {
var id = $(this).attr("id");
id = id.substr(id.indexOf("_")+1, id.length);
$("p#p_" + id).show();
$("p[id!='p_" + id + "']").each(function() {
$(this).hide();
});
});
});
</script>
<p id="p_1" style="display: none">Hello 1<button id="close_1">close</button></p>
<br/>
<button id="show_2">Show it 2 </button>
<p id="p_2" style="display: none">Hello 2<button id="close_2">close</button></p></p>
<br/>
<button id="show_3">Show it 3</button>
<p id="p_3" style="display: none">Hello 3<button id="close_3">close</button></p></p>
<script>
$(document).ready(function() {
$("button").click(function() {
var id = $(this).attr("id");
id = id.substr(id.indexOf("_")+1, id.length);
$("p#p_" + id).show();
$("p[id!='p_" + id + "']").each(function() {
$(this).hide();
});
});
});
</script>
De buttons worden gestript op _ zodat je de show 1 2 en 3 apart van elkaar kan showen, alleen nu wil de close button er ook inzetten maar is het bijv. mogelijk om na de 'id = id.substr(id.indexOf("_")+1, id.length);' een if te doen met: als het stukje wat voor _ staat open is dan show() en als het close is hide()? Ik kom er niet echt uit, graag jullie mening!
nee kun je niet achter komen op welke hij staat, hooguit allebei kijken of ze bestaan.. beter is het om een 1 te sturen als hij open moet, een 0 als hij dicht moet, dan kun je wel gewoon de tekst veranderen
De open-knop heb ik een class en een id meegegeven. Als er op de class geklikt wordt, kijkt hij welke id deze link heeft en bepaald daarmee welke afbeelding er geopend moet worden.
Tonen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(function(){
$('.thumbnail').click(function(){ // als er op de class geklikt wordt
var p_id = $(this).attr('id'); // wat de id waarop geklikt is?
var p_id_img = p_id+'_img'; // bepaal de id van de bijbehorende afbeelding
var x = document.getElementById(p_id_img);
$(x).slideDown(500); // en verberg deze
});
});
</script>
$(function(){
$('.thumbnail').click(function(){ // als er op de class geklikt wordt
var p_id = $(this).attr('id'); // wat de id waarop geklikt is?
var p_id_img = p_id+'_img'; // bepaal de id van de bijbehorende afbeelding
var x = document.getElementById(p_id_img);
$(x).slideDown(500); // en verberg deze
});
});
</script>
Sluiten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(function(){
$('.thumbnail_hide').click(function(){
var pre_p_id = $(this).attr('id');
var p_id = pre_p_id.replace('hide_', '');
var p_id_img = p_id+'_img';
var x = document.getElementById(p_id_img);
$(x).slideUp(500);
});
});
</script>
$(function(){
$('.thumbnail_hide').click(function(){
var pre_p_id = $(this).attr('id');
var p_id = pre_p_id.replace('hide_', '');
var p_id_img = p_id+'_img';
var x = document.getElementById(p_id_img);
$(x).slideUp(500);
});
});
</script>
