poblems with jquery code
- by Michael
Another jquery issue... I have tried this several times using "class" and "id" elements and I can not get it right. I am hoping the brains on stackoverflow can help!
The problem that I am having is when I open the page all elments are closed. When I click on one link all links open. I believe it closes correctly the problem is that when I open the first link all items open.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid Items</title>
<link href="bid.css" rel="stylesheet" type="text/css" />
<script src="jquerry/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showhideconent').hide();
$('a').click(function(){
$('#showhideconent').show('slow');
});
$('a#close').click(function(){
$('#showhideconent').hide('slow');
})
});
$(document).ready(function(){
$('#showhideconent2').hide();
$('a').click(function(){
$('#showhideconent2').show('slow');
});
$('a#close2').click(function(){
$('#showhideconent2').hide('slow');
})
});
$(document).ready(function(){
$('#showhideconent3').hide();
$('a').click(function(){
$('#showhideconent3').show('slow');
});
$('a#close3').click(function(){
$('#showhideconent3').hide('slow');
})
});
$(document).ready(function(){
$('#showhideconent4').hide();
$('a').click(function(){
$('#showhideconent4').show('slow');
});
$('a#close4').click(function(){
$('#showhideconent4').hide('slow');
})
});
</script>
</head>
<body class="oneColElsCtr" onload="MM_preloadImages('Assignment4b.jpg')">
<div id="container">
<div id="mainContent">
<h1>Bid Page</h1>
<h1>Coke Memorbila</h1>
<a href="#" id="click">Amber Bottle 1914</a>
<div id="box" align="center">
<div id="showhideconent">
<p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200" alt="Amber Coke" /></a></p>
<p><a href="#" id="close">Close</a> </p>
</div>
</div>
<a href="#" id="click">Amber Bottle 1915</a>
<div id="box" align="center">
<div id="showhideconent2">
<p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p>
<p><a href="#" id="close2">Close</a> </p>
</div>
</div>
<a href="#" id="click">Green 1929</a>
<div id="box" align="center">
<div id="showhideconent3">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>
</div>
</div>
<a href="#" id="click">1970s Cans</a>
<div id="box" align="center">
<div id="showhideconent4">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>
</div>
</div>
</body>
</html>
