javascript - テキストを使用して、ページの別の場所にさらに多くのテキストを表示するにはどうすればよいですか?

Question

タグと JavaScript を使用して、クリックするテキストに関連する詳細情報を表示できる領域を作成する方法を探しています。私に与えられたコーディングの優れた例ですが、テキストが div タグ内に設定されているレイアウトが既にあります。

Answer 1

別のdivonclickの値を切り替えるだけです：display

jsフィドル

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";
}