jquery 点击查看，收起特效

 <div class="all">
         <p><a href="javascript:;" id="onvk">点击查看</a></p>
         <div class="tedg" style="background: gainsboro; height: 300px;">
         </div>
   </div>

<style>
    *{ margin:0px; padding:0px; }
    .all{width:200px;position: fixed; bottom: 20px; left:40%;}
    .all p{width:200px; height:40px; border-radius:5px; border:1px solid #333;}
    .all p a{  float:right; width:70px; height:40px; line-height:40px; display:block; }
    .tedg{width:200px; border:1px solid #333;  height:200px; display:none;}
</style>

 <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function(){
        $('#onvk').click(function(){
       if($(this).text()=='点击查看'){
           $(this).text('收起')
      }else{
        $(this).text('点击查看')
      }
       $(this).parents('p').siblings('.tedg').stop().slideToggle();  /*找到#onvk的所有是p元素的祖先元素,.tedg的同辈元素，停止高度的变化*/
   })
    })
</script>