【Javascript】「続きを読む」ボタンを作る方法

コンテンツが縦に長くなりすぎた時にみられる「続きを読む」ボタンを実装方法をご紹介したいと思います！
スマホでWEBサイトを見ると、コンテンツの量が長くなりすぎると、ユーザーにとってストレスをかける場合があります。

「続きを読む」ボタンの実装手順

HTMLソースの作成

まずは、HTMLを作成します。
今回は以下のようなHTMLを作成しています。

<div class="content_box">
  <p>続きを読むボタンを作る方法テキストサンプル</p>
  <button class="readmore">
    <span class="open">続きを読む</span>
    <span class="close">閉じる</span>
  </button>
</div>

CSSソースの作成

次にCSSを作成して、見た目を整えていきます。

.content_box {
    height: 150px; 
    overflow: hidden;
    transition: height 0.3s; 
}
.content_box.is-open {
    height: auto; 
}
.readmore {
    position: relative;
    margin: 3em auto;
    display: block;
    color: #666;
    border: none;
    outline: 0;
    cursor: pointer;
    background: none;
    letter-spacing: 0.1em;
}
.readmore:before {
  content: "";
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  display: block;
  margin: 0 auto .5em;
  background: url(../img/arrow.png) no-repeat center / 20px #fff;
  transition: .3s;
}
.readmore.on-click:before {
  transform: rotate(180deg);
}
.readmore .open {
  display: block;
}
.readmore.on-click .open {
  display: none;
}
.readmore .close {
  display: none;
}
.readmore.on-click .close {
  display: block;
}

JavaScriptソースの作成

最後に、JavaScriptで動きの部分を作っていきます。
今回はjQueryを使わず、Javascriptで作成しております。

const readMoreBtn = document.querySelector('.readmore');
const contentBox = document.querySelector('.content_box');

  readMoreBtn.addEventListener('click', () => {
    readMoreBtn.classList.toggle('on-click');
    contentBox.classList.toggle('is-open');
});

まとめ

今回はJavaScriptを使って「続きを読む」ボタンを実装する方法をご紹介いたしましが、いかがだったでしょうか？

ぜひ試してみてください！