Problems with show hid jquery
Posted
by Michael
on Stack Overflow
See other posts from Stack Overflow
or by Michael
Published on 2010-05-02T01:16:38Z
Indexed on
2010/05/02
1:17 UTC
Read the original article
Hit count: 451
Filed under:
jQuery
I am someone can help... This should be easy but I am lost.
<!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>Show Hide Sample</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#content1').hide();
$('a').click(function(){
$('#content1').show('slow');
});
$('a#close').click(function(){
$('#content1').hide('slow');
})
});
</script>
<style>
body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF}
#content1{
border:1px solid #DDDDDD;
padding:10px;
margin-top:5px;
width:300px;
}
</style>
</head>
<body>
<a href="#" id="click">Test 1</a>
<div class="box">
<div id="content1">
<h1 align="center">Hide 1</h1>
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p>
<p><a href="#" id="close">Close</a></p>
</div>
</div>
<a href="#" id="click">Test 2</a>
<div class="box">
<div id="content1">
<h1 align="center">Hide 2</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p>
<p><a href="#" id="close">Close</a></p>
</div>
</div>
</body>
</html>
© Stack Overflow or respective owner
