如何使用文本在页面上的其他位置显示更多文本？

Question

我一直在研究如何使用标签和javascript来创建一个区域，在该区域中可以看到有关您要点击的文本的更多信息？给我的一个很好的编码示例，但我已经有一个布局，其中文本设置在div标签内。

Answer 1

只需切换onclick切换另一个div的display值：

jsFiddle

<强> CSS

#toggle {
   position: absolute;
   left: 20px;
   top: 100px;
}

<强> HTML

<div id="toggle">
   Show More
</div>
<div id="showMoreText" style="display: none">
   more text here
</div>

<强> JS

window.onload = function() {
    document.getElementById('toggle').onclick = showMore;
}

function showMore() {
    var div = document.getElementById('showMoreText');
    var display = div.style.display;
    display == "none" ? div.style.display = "block" : div.style.display = "none";
}