JavaScriptで、スクロールボックスの高さを拡大縮小し、隠れているテキストを表示させたり戻したりするサンプル。
jQueryを使って作る方法については、「jQueryを使い、スクロールボックスの高さを変更」のページへ。
実装例
詳細
- 用語Ａ
- 用語Ａの説明文１
- 用語Ａの説明文２
- 用語Ｂ
- 用語Ｂの説明文１
- 用語Ｃ
- 用語Ｃの説明文１
- 用語Ｃの説明文２
- 用語Ｃの説明文３
- 用語Ｄ
- 用語Ｄの説明文１
- 用語Ｅ
- 用語Ｅの説明文１
- 用語Ｅの説明文２
実装例（サンプル）の動作について
- 「全表示」ボタンをクリックすると、ベージュ色のボックス要素の高さを、コンテンツを全て表示できる高さまで拡大する。ボタンのテキストが、「戻す」に変わる。
- 「戻す」ボタンをクリックすると、元のスクロールボックスに戻る。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $flag = true;
document.getElementById( "sampleButton" ).onclick = function(){
if( $flag ){
$flag = false;
document.getElementById( "sampleBox" ).style.height = "auto";
this.innerHTML = "戻す";
}else{
$flag = true;
document.getElementById( "sampleBox" ).style.height = "130px";
this.innerHTML = "全表示";
}
};
}
</script>
window.onload = function () {
var $flag = true;
document.getElementById( "sampleButton" ).onclick = function(){
if( $flag ){
$flag = false;
document.getElementById( "sampleBox" ).style.height = "auto";
this.innerHTML = "戻す";
}else{
$flag = true;
document.getElementById( "sampleBox" ).style.height = "130px";
this.innerHTML = "全表示";
}
};
}
</script>
HTML
<div id="sampleWrap">
<div id="sampleHeader">
<h2>詳細</h2>
<button id="sampleButton">全表示</button>
<div style="clear: both;"></div>
</div>
<div id="sampleBox">
<dl>
<dt>用語Ａ</dt>
<dd>用語Ａの説明文１</dd>
<dd>用語Ａの説明文２</dd>
<dt>用語Ｂ</dt>
<dd>用語Ｂの説明文１</dd>
<dt>用語Ｃ</dt>
<dd>用語Ｃの説明文１</dd>
<dd>用語Ｃの説明文２</dd>
<dd>用語Ｃの説明文３</dd>
<dt>用語Ｄ</dt>
<dd>用語Ｄの説明文１</dd>
<dt>用語Ｅ</dt>
<dd>用語Ｅの説明文１</dd>
<dd>用語Ｅの説明文２</dd>
</dl>
</div>
</div>
<div id="sampleHeader">
<h2>詳細</h2>
<button id="sampleButton">全表示</button>
<div style="clear: both;"></div>
</div>
<div id="sampleBox">
<dl>
<dt>用語Ａ</dt>
<dd>用語Ａの説明文１</dd>
<dd>用語Ａの説明文２</dd>
<dt>用語Ｂ</dt>
<dd>用語Ｂの説明文１</dd>
<dt>用語Ｃ</dt>
<dd>用語Ｃの説明文１</dd>
<dd>用語Ｃの説明文２</dd>
<dd>用語Ｃの説明文３</dd>
<dt>用語Ｄ</dt>
<dd>用語Ｄの説明文１</dd>
<dt>用語Ｅ</dt>
<dd>用語Ｅの説明文１</dd>
<dd>用語Ｅの説明文２</dd>
</dl>
</div>
</div>
CSS
<style>
#sampleWrap {
padding: 10px;
width: 300px;
background-color: gold;
border: 1px solid gray;
border-radius: 10px;
}
#sampleHeader h2 {
float: left;
margin: 0;
padding: 0;
font-size: 16px;
background: none;
border: none;
}
#sampleButton {
float: right;
font-size: 16px;
}
#sampleBox {
padding: 10px;
width: 280px;
height: 130px;
overflow: auto;
background-color: #f5f5dc;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
}
</style>
#sampleWrap {
padding: 10px;
width: 300px;
background-color: gold;
border: 1px solid gray;
border-radius: 10px;
}
#sampleHeader h2 {
float: left;
margin: 0;
padding: 0;
font-size: 16px;
background: none;
border: none;
}
#sampleButton {
float: right;
font-size: 16px;
}
#sampleBox {
padding: 10px;
width: 280px;
height: 130px;
overflow: auto;
background-color: #f5f5dc;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
}
</style>