点击出现，再点击收起

 <style>
      .body{width:100%; height:320px; margin:0 auto; overflow:hidden;}
         .content{width:500px; padding:3px 5px; font-size:16px; color:#333;}
         .content span{width:100%; height:30px; line-height:30px; display:block;}
         .btn_more{width:500px;}
        .btn{width:55px; height:30px; text-align:center; line-height:30px; display:block; color:red; text-decoration:none;}
  </style>

  <script>
        function show(){
            document.getElementById("more").style.display = "block";
            document.getElementById('btn').innerHTML="收起-";
            document.getElementById('btn').href="javascript:hide();";
        }

        function hide(){
            document.getElementById('more').style.display='none';
            document.getElementById('btn').innerHTML="展开+";
            document.getElementById('btn').href="javascript:show();";
        }
  </script>

    <div class="body">
      <div class="content">
        <span>测试测试测试测试测试测试1</span>
        <span>测试测试测试测试测试测试2</span>
        <span>测试测试测试测试测试测试3</span>
            <span>测试测试测试测试测试测试4</span>

        <div id="more" class="more" style="display:none;">
          <span>更多更多更多更多更多更多更多更多1</span>
          <span>更多更多更多更多更多更多更多更多2</span>
        </div>
      </div>

         <div class="btn_more">
        <a href="javascript:show();" id="btn" class="btn">展开+</a>
         </div>
     </div>