jquery简单的展开收起效果代码

jquery简单的展开收起效果代码

HTML模块

<div class="panel">
<p>lxd</p>
<p>test</p>
</div>
<p class="flip"><span class="1">展开</span><span class="2" style="display:none;">收起</span></p>

CSS模块

.panel{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;display:none;}
.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}

jquery模块

<script type="text/javascript">
$(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
    $(".xs1").toggle();
    $(".xs2").toggle();
  });});
</script>