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:
<!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>Iemand enig idee hoe ik dit kan oplossen?
Alvast bedankt!!
