jQuery toggle
Ik ben bezig met een simpele website die bestaat uit 4 verschillende onderdelen.
Deze onderdelen kunnen door 4 afbeeldingen geopend worden. Daarnaast moet daaronder nog een menu staan die ook tussen deze 4 onderdelen kan navigeren.
Nu heb ik al het een en ander geprobeerd maar het wil maar niet lukken.
Zie voorbeeld link:
http://rcsdesign.nl/amx/dca/
De 4 afbeeldingen werken prima, en de divs sluiten zich ook weer nadat je op "< Back" klikt. Echter krijg ik het niet voor elkaar de 4 links onderaan werkend te krijgen.
Ik wil graag dat deze dus eerst alle 4 de divs sluit, en daarna de juiste opent.
Dit is de code die ik gebruik:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Digital Coast Advisors</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#open_founder").click(function() {
$("#content_founder").toggle("clip", { direction: "vertical" });
});
$(".open_founder").click(function() {
$("#content_founder").toggle("clip", { direction: "vertical" });
});
$("#open_hollywood").click(function() {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
});
$(".open_hollywood").click(function() {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
});
$("#open_washington").click(function() {
$("#content_washington").toggle("clip", { direction: "vertical" });
});
$(".open_washington").click(function() {
$("#content_washington").toggle("clip", { direction: "vertical" });
});
$("#open_world").click(function() {
$("#content_world").toggle("clip", { direction: "vertical" });
});
$(".open_world").click(function() {
$("#content_world").toggle("clip", { direction: "vertical" });
});
$("#close_founder").click(function() {
$("#content_founder").toggle("clip", { direction: "vertical" });
});
$("#close_hollywood").click(function() {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
});
$("#close_washington").click(function() {
$("#content_washington").toggle("clip", { direction: "vertical" });
});
$("#close_world").click(function() {
$("#content_world").toggle("clip", { direction: "vertical" });
});
$(".close_all").click(function() {
if ($(content_founder).is(":visible")) {
$("#content_founder").toggle("clip", { direction: "vertical" });
}
if ($(content_hollywood).is(":visible")) {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
}
if ($(content_washington).is(":visible")) {
$("#content_washington").toggle("clip", { direction: "vertical" });
}
if ($(content_world).is(":visible")) {
$("#content_world").toggle("clip", { direction: "vertical" });
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<div class="menu"><img src="1.png" id="open_founder" /></div>
<div class="menu"><img src="2.png" id="open_hollywood" /></div>
<div class="menu"><img src="3.png" id="open_washington" /></div>
<div class="menu"><img src="4.png" id="open_world" /></div>
</div>
<div id="content">
<div id="content_founder">
<img src="1.png" class="content_img" />
<h1>founder</h1>
<p>Franklin Urteaga is CEO of Digital Coast Advisors, Inc., which be founder in 2000 following a distinguished career in business and public service, including various roles serving U.S. President Bill Clinton & Vice President Al Gore. Ge graduated summa cum laude with a Masters degree in Public Management & Government, specializing in Executive, Legislative & Regulatory Management, from The George Washington University, and holds a Bachelor of Science degree in Industrial Technology.</p>
<br /><br />
<a href="#" id="close_founder"><img src="back.png" /></a>
</div>
<div id="content_hollywood">
<img src="2.png" class="content_img" />
<h1>hollywood</h1>
<p>Fulfill your vision... with Hollywood, Entertainment, and Media.</p>
<br /><br />
<a href="#" id="close_hollywood"><img src="back.png" /></a>
</div>
<div id="content_washington">
<img src="3.png" class="content_img" />
<h1>washington</h1>
<p>Maximize your potential... with the White House, Capital Hill, & the federal agencies.</p>
<br /><br />
<a href="#" id="close_washington"><img src="back.png" /></a>
</div>
<div id="content_world">
<img src="4.png" class="content_img" />
<h1>world</h1>
<p>Extend your reach... to foreign governments, international corporations, and global public organizations.</p>
<br /><br />
<a href="#" id="close_world"><img src="back.png" /></a>
</div>
</div>
<div id="footer_menu">
<ul>
<li><a class="close_all open_founder">Founder</a></li>
<li><a class="close_all open_hollywood">Hollywood</a></li>
<li><a class="close_all open_washington">Washington</a></li>
<li><a class="close_all open_world">World</a></li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Digital Coast Advisors</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#open_founder").click(function() {
$("#content_founder").toggle("clip", { direction: "vertical" });
});
$(".open_founder").click(function() {
$("#content_founder").toggle("clip", { direction: "vertical" });
});
$("#open_hollywood").click(function() {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
});
$(".open_hollywood").click(function() {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
});
$("#open_washington").click(function() {
$("#content_washington").toggle("clip", { direction: "vertical" });
});
$(".open_washington").click(function() {
$("#content_washington").toggle("clip", { direction: "vertical" });
});
$("#open_world").click(function() {
$("#content_world").toggle("clip", { direction: "vertical" });
});
$(".open_world").click(function() {
$("#content_world").toggle("clip", { direction: "vertical" });
});
$("#close_founder").click(function() {
$("#content_founder").toggle("clip", { direction: "vertical" });
});
$("#close_hollywood").click(function() {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
});
$("#close_washington").click(function() {
$("#content_washington").toggle("clip", { direction: "vertical" });
});
$("#close_world").click(function() {
$("#content_world").toggle("clip", { direction: "vertical" });
});
$(".close_all").click(function() {
if ($(content_founder).is(":visible")) {
$("#content_founder").toggle("clip", { direction: "vertical" });
}
if ($(content_hollywood).is(":visible")) {
$("#content_hollywood").toggle("clip", { direction: "vertical" });
}
if ($(content_washington).is(":visible")) {
$("#content_washington").toggle("clip", { direction: "vertical" });
}
if ($(content_world).is(":visible")) {
$("#content_world").toggle("clip", { direction: "vertical" });
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<div class="menu"><img src="1.png" id="open_founder" /></div>
<div class="menu"><img src="2.png" id="open_hollywood" /></div>
<div class="menu"><img src="3.png" id="open_washington" /></div>
<div class="menu"><img src="4.png" id="open_world" /></div>
</div>
<div id="content">
<div id="content_founder">
<img src="1.png" class="content_img" />
<h1>founder</h1>
<p>Franklin Urteaga is CEO of Digital Coast Advisors, Inc., which be founder in 2000 following a distinguished career in business and public service, including various roles serving U.S. President Bill Clinton & Vice President Al Gore. Ge graduated summa cum laude with a Masters degree in Public Management & Government, specializing in Executive, Legislative & Regulatory Management, from The George Washington University, and holds a Bachelor of Science degree in Industrial Technology.</p>
<br /><br />
<a href="#" id="close_founder"><img src="back.png" /></a>
</div>
<div id="content_hollywood">
<img src="2.png" class="content_img" />
<h1>hollywood</h1>
<p>Fulfill your vision... with Hollywood, Entertainment, and Media.</p>
<br /><br />
<a href="#" id="close_hollywood"><img src="back.png" /></a>
</div>
<div id="content_washington">
<img src="3.png" class="content_img" />
<h1>washington</h1>
<p>Maximize your potential... with the White House, Capital Hill, & the federal agencies.</p>
<br /><br />
<a href="#" id="close_washington"><img src="back.png" /></a>
</div>
<div id="content_world">
<img src="4.png" class="content_img" />
<h1>world</h1>
<p>Extend your reach... to foreign governments, international corporations, and global public organizations.</p>
<br /><br />
<a href="#" id="close_world"><img src="back.png" /></a>
</div>
</div>
<div id="footer_menu">
<ul>
<li><a class="close_all open_founder">Founder</a></li>
<li><a class="close_all open_hollywood">Hollywood</a></li>
<li><a class="close_all open_washington">Washington</a></li>
<li><a class="close_all open_world">World</a></li>
</ul>
</div>
</div>
</body>
</html>
Iemand enig idee hoe ik dit kan oplossen?
Alvast bedankt!!
Gewijzigd op 07/09/2012 17:36:25 door Robin S
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
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
$(function() {
$("[id^=open_]").on('click', function() {
var openid = $(this).attr('id').replace(/[a-zA-Z]+(?=_)/g, 'content');
$('#' + openid).toggle("clip", { direction: "vertical" });
});
$("[id^=close_]").on('click', function() {
$("[id^=content_]:visible").toggle("clip", { direction: "vertical" });
});
$("[class^=open_]").on('click', function() {
var openid = $(this).attr('class').replace(/[a-zA-Z]+(?=_)/g, 'content');
var visContent = $("[id^=content_]:visible")
if (visContent.length > 0) {
visContent.toggle("clip", function() {
direction: "vertical";
$('#' + openid).toggle("clip", { direction: "vertical" });
});
} else {
$('#' + openid).toggle("clip", { direction: "vertical" });
}
});
});
$("[id^=open_]").on('click', function() {
var openid = $(this).attr('id').replace(/[a-zA-Z]+(?=_)/g, 'content');
$('#' + openid).toggle("clip", { direction: "vertical" });
});
$("[id^=close_]").on('click', function() {
$("[id^=content_]:visible").toggle("clip", { direction: "vertical" });
});
$("[class^=open_]").on('click', function() {
var openid = $(this).attr('class').replace(/[a-zA-Z]+(?=_)/g, 'content');
var visContent = $("[id^=content_]:visible")
if (visContent.length > 0) {
visContent.toggle("clip", function() {
direction: "vertical";
$('#' + openid).toggle("clip", { direction: "vertical" });
});
} else {
$('#' + openid).toggle("clip", { direction: "vertical" });
}
});
});
Bovenstaand en de close_all class weghalen bij de links in bottom menu, en dan zou het moeten werken.
Gewijzigd op 09/09/2012 21:25:07 door Jurgen B
Moet ik dit toevoegen aan mijn bestaande jQuery script? Of is dit een volledige vervanging hiervan?
Toevoeging op 09/09/2012 23:12:43:
Geweldig! Dit werkt perfect! Hartstikke bedankt :)