長い文章を折りたたむ

JavaScript

CSSのdisplayプロパティを切り替えることにより長い文章を折りたたんだように表示させることができる

//<![CDATA[
//指定されたid属性のdisplayプロパティとリンクボタンのdisplayプロパティを切り替える
function viewSwitch(targetId){
    if (document.getElementById(targetId)) {
        if (document.getElementById(targetId + '-view').style.display != 'none') {
            document.getElementById(targetId + '-view').style.display = 'none';
            document.getElementById(targetId).style.display = 'block';
        } else {
            document.getElementById(targetId + '-view').style.display = 'block';
            document.getElementById(targetId).style.display = 'none';
        }
    }
}
//]]>
</script>
</head>
<body>
<div id="container">
    <div id="description">
        <p>あああ</p>
        <a href="#" id="more-view" class="toggle" onclick="viewSwitch('more');return false;">続きをみる</a>
    </div>
    <div id="more">
        <p>いいい</p>
        <a href="#" id="more-hide" class="toggle" onclick="viewSwitch('more');return false;">閉じる</a>
    </div>
</div>