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>