How can I make function for multiple instances
I have written a small code to show hide element and its working fine. What can I do to make it work on multiple instances. How can I make code for multiple instances
<!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>Untitled Document</title>
<style>
.heading{ font-size:18px}
.paragraph{ font-size:12px; height:0; overflow:hidden; background-color:#CCCCCC;}
.close{ color:#FF0000; font-weight:bold;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<div>
<h1 class="heading">This is Heading</h1>
<p class="paragraph">This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph.<br/><span class="close">Close</span> </p>
</div>
<div>
<h1 class="heading">This is Heading</h1>
<p class="paragraph">This is paragraph. This is paragraph. This is paragraph. Th开发者_如何转开发is is paragraph. This is paragraph. This is paragraph. This is paragraph.<br/><span class="close">Close</span> </p>
</div>
<script>
$('h1.heading').click(function(){
$clickedElement=$(this);
$('$clickedElement.paragraph').animate({'height':'50px'},1000);
})
$('.close').click(function(){
$('.paragraph').animate({'height':'0px'},1000);
})
</script>
</body>
</html>
change your code to this:
<script>
$('h1.heading').click(function(){
$(this).next().animate({'height':'50px'},1000);
})
$('.close').click(function(){
$('.paragraph').animate({'height':'0px'},1000);
})
</script>
You need a <body> tag after </head>
Also, You should probably be doing this:
$(function() {
$('h1.heading').click(function(){
$(this).parent().find('.paragraph').slideDown(1000);
})
$('.close').click(function(){
$(this).parent().slideUp(1000);
})
});
Otherwise those elements will stay visible and overlap in some browsers.
加载中,请稍侯......
精彩评论