How can I make function for multiple instances_问答_开发者

How can I make function for multiple instances

开发者 https://www.devze.com 2023-02-15 19:43 出处：网络

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

相关专题：jquery

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.