「続きを読む」ボタンのデザイン

htmlの文書が長い場合「続きを読む」ボタンを利用して折りたたんだ状態とすることがあります。縦長ページのデザインでは「続けて読む」を配置することで見やすくなることがあります。

当ページのサンプルはアコーディオン（ゆっくり開く／ゆっくり閉じる）や少しずつ消えるグラデーションにも対応しています。
折りたたんだ状態から開くときの高さは自動でJavaScriptから取得しています。

生成された「html」「css」「JavaScript」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

<div class="nextReadBox" id="area01">
  <input type="checkbox" id="ck01" onclick="docOpen('01')">
  <label for="ck01"></label>
 
  <div id="doc01">
    <!-- このdiv内に文書を書きます -->
    <p>下のhtmlのように数行追加すれば、「続きを開く」を簡単に作成できます。</p>
    <p>・・・（略）</p>
  </div>
 
</div>

<style type="text/css">
 /* === ベースのBOX =============================================== */
.nextReadBox {
  position      : relative;                 /* relative指定は必須   */
  overflow      : hidden;                   /* hidden指定は必須     */
  transition    : .5s;                      /* 開閉の速度           */
  height        : 150px;                    /* 閉じているときの高さ */
 
  background    : #fff;               /* 色や文字情報は変更ください */
  line-height   : 1.3;
  padding       : 5px 10px;
  text-align    : left;
  font-size     : 13pt;
  font-weight   : bold;
  border        : 3px solid #999;
  border-radius : 8px;
  max-width     : 400px;
  margin        : auto;
}
 
 /* === チェックボックス ========================================== */
.nextReadBox > input {
  display       : none;                                   /* 非表示 */
}
 
 /* === チェックボックスのlabel（＝ボタンに見せる） =============== */
.nextReadBox > label {
  position      : absolute;
  display       : inline-block;
  box-sizing    : border-box;
 
  bottom        : 0;   /* 左右いっぱいのBOXにグラデーションを付ける */
  left          : 0;
  right         : 0;
  height        : 60px;
  background    : linear-gradient( rgba(255, 255, 255, 0.10),
                                   #ffffff 65% );
 
  padding-top   : 40px;                   /* 下寄せに文字を配置する */
  text-align    : center;
  font-size     : 15px;
  color         : #0059b3;
}
 
 /* === 開いているときのボタンサイズを変更 ======================== */
.nextReadBox > input[type="checkbox"]:checked + label {
  background    : rgba(255, 255, 255, 0.60);
  height        : 25px;
  padding-top   : 5px;
  font-size     : 12px;
}
 
 /* === ボタンに表示する文字（閉じているとき） ==================== */
.nextReadBox > input[type="checkbox"]:not(:checked) + label::after {
  content       : "続きを開く";
}
 
 /* === ボタンに表示する文字（開いているとき） ==================== */
.nextReadBox > input[type="checkbox"]:checked + label::after {
  content       : "閉じる";
}
</style>

<script type="text/javascript">
function docOpen(){
 // --------------------------------------------------------------
 //  文書の開閉
 // --------------------------------------------------------------
  var wArea = document.getElementById("area01");   // 全体の枠
  var wCheck= document.getElementById("ck01");     // チェックボックス
  var wDoc  = document.getElementById("doc01");    // 文書のエリア
 
  if(wCheck.checked){
    // 全体枠高さを文書エリアの高さ＋ボタン高さにする
    wArea.style.height = parseInt(wDoc.clientHeight + 40)+"px";
  }else{
    wArea.style.height = "";
  }
}
</script>

上記サンプルは帯状のボタンですが、通常のボタンのように見せることもできます。