Menu
Hi all,
Im really stumped so if anyone is any good with jquery i could really use your help! Im trying to get elements to display only one at a time using ‘toggle’ (so that if a user clicks one link it toggles some info in a div, a different link toggles diferent info and hides the first set of info etc… if u catch my drift!)
I have managed to acheive this with the code below:
[CODE] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<title>Fade Slider Toggle jQuery Plogin</title>
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css” type=”text/css” media=”all” />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js” type=”text/javascript”></script>
<script src=”http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js” type=”text/javascript”></script>
<script src=”http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js” type=”text/javascript”></script>
<script src=”http://jqueryui.com/demos/toggle/js/demos.js” type=”text/javascript”></script>
<script src=”http://jqueryui.com/demos/toggle/themeroller/themeswitchertool/” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
//hides everything
$(“#infocontent *”).hide();
//now we show them by which they click on
$(“#linkjoedhit”).click(function(event){
$(“#infocontent *”).hide();
$(“#infojoedhit”).toggle();
return false;
});
$(“#linkgarykhit”).click(function(event){
$(“#infocontent *”).hide();
$(“#infogarykhit”).toggle();
return false;
});
});
</script>
<style>
.xx { width: 240px; height: 135px; padding: 0.4em; position: relative; background-color:#FF0000 }
</style>
</head>
<body>
<a id=”linkjoedhit” href=””>Joe</a><br/>
<a id=”linkgarykhit” href=””>Gary</a>
<div id=”infocontent”>
<div id=”infojoedhit” class=”xx”>Information about Joe</div>
<div id=”infogarykhit” class=”xx”>Information about Gary</div>
</div>
</body>
</html>
However, i want to add a jquery effect (drop effect) – which i know can be done [see here: [url]http://jqueryui.com/demos/toggle/]
[CODE]<script type=”text/javascript”>
$(document).ready(function(){
//hides everything
$(“#infocontent *”).hide();
//now we show them by which they click on
$(“#linkjoedhit”).click(function(event){
$(“#infocontent *”).hide();
$(“#infojoedhit”).toggle(drop);
return false;
});
$(“#linkgarykhit”).click(function(event){
$(“#infocontent *”).hide();
$(“#infogarykhit”).toggle(drop);
return false;
});
});
</script>
Unfortunatly this didn’t work. Can anybody help me to get it working?
Thanks loads in advance
[ps i have left the javascript refs in the code above so you can see what im using – it should all be fine its the same as being used on the example page i cited]