jquery met variabele div's
Ik ben net begonnen met jquery, Ik vind het erg gaaf, en krijg er al het een en ander mee voor elkaar. Wat ik wil is een aantal divs met info onder elkaar hebben en als men daarop klikt dat die open schuiven en de info erin tonen. Dit werkt perfect. Maar nu wil ik dit eigenlijk graag aan een database koppelen, en die div's variabel maken. Dit is wat ik nu heb:
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img.magiflex1").click(function () {
if ($("div.divblok_1").is(":hidden")) {
$("div.divblok_1").slideDown("slow");
}else{
if ($("div.divblok_1").is(":visible")) {
$("div.divblok_1").slideUp("slow");
}
}
});
$("img.magiflex").click(function () {
if ($("div.divblok_2").is(":hidden")) {
$("div.divblok_2").slideDown("slow");
}else{
if ($("div.divblok_2").is(":visible")) {
$("div.divblok_2").slideUp("slow");
}
}
});
});
</script>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen,projection" />
</head>
<body>
<div id="container">
<div class="header"><img src="images/kalydos.png" width="300"></div>
<div class="divblok_H"><img src="images/magiflex.png" height="40" class="magiflex1 headerlogo"></div>
<div class="divblok_1">
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
</div>
<div class="bottomheader"></div>
<div class="divblok_H"><img src="images/magiflex.png" height="40" class="magiflex headerlogo"></div>
<div class="divblok_2">
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
</div>
<div class="bottomheader"></div>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img.magiflex1").click(function () {
if ($("div.divblok_1").is(":hidden")) {
$("div.divblok_1").slideDown("slow");
}else{
if ($("div.divblok_1").is(":visible")) {
$("div.divblok_1").slideUp("slow");
}
}
});
$("img.magiflex").click(function () {
if ($("div.divblok_2").is(":hidden")) {
$("div.divblok_2").slideDown("slow");
}else{
if ($("div.divblok_2").is(":visible")) {
$("div.divblok_2").slideUp("slow");
}
}
});
});
</script>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen,projection" />
</head>
<body>
<div id="container">
<div class="header"><img src="images/kalydos.png" width="300"></div>
<div class="divblok_H"><img src="images/magiflex.png" height="40" class="magiflex1 headerlogo"></div>
<div class="divblok_1">
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
</div>
<div class="bottomheader"></div>
<div class="divblok_H"><img src="images/magiflex.png" height="40" class="magiflex headerlogo"></div>
<div class="divblok_2">
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
</div>
<div class="bottomheader"></div>
</html>
Nja bovenaan zie je het dus al ik heb per vak een aparte functie gemaakt, omdat alle tutorials op jquery.org alleen maar gaan over het animeren van een paragraaf ofzo, nooit een variabele paragraaf. Ik heb het overigens zo gedaan omdat de vakken met slidetoggle standaard open staan, en ik wil ze standaard gesloten hebben. Maar ik wil nu graag mn div's aanmaken aan de hand van entries in een database. Dus dat wordt dan bvb div1 div2 etc. Maar hoe maak ik daar nu goeie jquery code voor die snapt dat als er op header1 geklikt wordt dat div1 dan uitschuift, en zo door tot header33 en div33.
Hoop dat iemand me dit kan uitleggen want op jquery.org kan ik er niks over vinden.
Edit, ik vond net een klein beetje iets over javascript daar dit mee geprobeerd bij wijze van test, maar werkte niet:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function(){
var slidediv = {no:1};
$("img.magiflex" slidediv.no).click(function () {
$("div.divblok_" slidediv.no).slideToggle("slow");
});
});
var slidediv = {no:1};
$("img.magiflex" slidediv.no).click(function () {
$("div.divblok_" slidediv.no).slideToggle("slow");
});
});
Grtz!
Gewijzigd op 01/01/1970 01:00:00 door Martijn
Maar mij lijkt eigenlijk dat je elke div een andere id geeft, niet een andere class. Want ze zullen lijkt mij steeds hetzelfde opgemaakt zijn e.d.
Dan kan je ze gewoon op die class selecteren en dan weer met each een click event handler aan hangen.