javascript - 显示 "show more"按钮并隐藏第二行

Question

我完全迷失在这里。我正在尝试仅使用一行文本在我的网站上显示信息。如果需要显示更多信息，额外的信息将显示在第二行。但是我怎样才能隐藏第二行并显示一个按钮“显示更多”呢？

一旦用户点击显示更多按钮，第二行的额外信息/文本将只显示。谢谢...

下面是我的按钮的 javascript，我不知道如何编写 html 部分，第二行将自动隐藏并显示“显示更多”按钮。

var hide2 = 1;    
$('#showmorerates').click(function(){
            if(hide2 == 1){
                $('.morerates').toggle(300);
                document.getElementById("showmorerates").innerHTML = '<a>Show Less</a>';
                hide2 = 0;
            } else {
                $('.morerates').toggle(300);
                document.getElementById("showmorerates").innerHTML = '<a>Show More</a>';
                hide2 = 1;
            }
    });

Answer 1

只需使用一个 css 类来设置 div 的高度并将溢出设置为隐藏。每当单击 show more 按钮时，从文本容器中删除此类。

.less {
    overflow: hidden;
    height: 1em;
}

这是工作 fiddle :http://jsfiddle.net/2tg7v/