请教3个一样的JS效果，如何并在一起

[oicq12]

<script type="text/javascript">
$(function(){
var slideHeight = 200; // px
var defHeight = $('#wrap').height();
if(defHeight >= slideHeight){
$('#wrap').css('height' , slideHeight + 'px');
$('#read-more').append('<a href="#">展开</a>');
$('#read-more a').click(function(){
var curHeight = $('#wrap').height();
if(curHeight == slideHeight){
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more a').html('收起');
$('#gradient').fadeOut();
}else{
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more a').html('展开');
$('#gradient').fadeIn();
}
return false;
});
}
});
</script>


<div id="wrap">
<div><p>内容部分，长内容可展开收缩</p></div>
<div id="gradient"></div>
</div>
<div id="read-more"></div>



我对JS完全不懂
在网上找了一段展开隐藏效果的代码，但是只能用一个地方，我有2-3个地方需要这种效果，应该怎么弄
比如，想增加，#wrap2 #wrap3，#read-more2，#read-more3
虽然复制3段一样的JS，稍作改下可以实现，但代码太多了。应该怎么写，可以实现多个地方调用同一段JS？？
非常感谢，在知道发帖，多天求助无果，希望这里大神能帮我解决这个问题，再次感谢

[化工厂很高]

给你要引的标签建立class别用Id，然后在用$获取，因为Id只可以出现一次，不可以重复，而class就可以重复。 eg: <input class="inp" type="text" value=" "/> //这是第一个需要做隐藏的地方 <input class="inp" type="text" value=" "/> //这是第二个需要做隐藏的地方 <input class="inp" type="text" value=" "/> //这是第三个需要做隐藏的地方 这样你就写一个js获取的时候用$(".inp")就可以获取了