如何过多文字显示更多按钮,点击可显示更多文字或者隐藏部分文字

由于介绍比较多，可以将部分文字隐藏，点击更多按钮，将全部文字显示出来

同时，如果文字全部显示出来，就显示“收缩”

 直接上js代码

 function showmore(contentid){
        var len = 300;      //默认显示字数
        var ctn = document.getElementById(contentid);  //获取div对象
        var content = ctn.innerHTML;                   //获取div里的内容
content2 = content.replace(/(^\s*)|(\s*$)/g, ""); 
content2= content2.replace(/<[^>]+>/g,"");//去掉所有的html标记

 //alert(content);
        var span = document.createElement("span");     //创建<span>元素
        var a = document.createElement("a");           //创建<a>元素
        span.innerHTML = content2.substring(0,len);     //span里的内容为content的前len个字符

        a.innerHTML = content.length>len?"... 展开":"";  ////判断显示的字数是否大于默认显示的字数    来设置a的显示        
        a.href = "javascript:void(0)";//让a链接点击不跳转

        a.onclick = function(){
            if(a.innerHTML.indexOf("展开")>0){      //如果a中含有"展开"则显示"收起"
              a.innerHTML = "<<&nbsp;收起";
              span.innerHTML = content;
            }else{
                a.innerHTML = "... 展开";
                span.innerHTML = content.substring(0,len);
            }
        }
        // 设置div内容为空，span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
     }        

前台调用的时候写上：

showmore('aboutuscontent');//aboutuscontent是id名