• TOP
  • 記事一覧
  • 【CSS JavaScript サンプルコード】アコーディオン 続きを読む（Read more）Toggle 折りたたみコンテンツ

【CSS JavaScript サンプルコード】アコーディオン 続きを読む（Read more）Toggle 折りたたみコンテンツ

更新日：2025/02/05

HTML、CSS、JSを使って「もっと読む」のUIのサンプルコードを紹介！

サンプルコード

<div class="readmore-container">
    <div class="readmore-content" id="readmoreContent">
      <!-- ここに長めの文章を入れる -->
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum erat eget commodo egestas. 
        Vivamus consequat, nunc ac malesuada pretium, lectus libero varius quam, et imperdiet neque arcu nec est. 
        Nullam suscipit erat in eros dapibus, at fringilla orci semper. Sed suscipit, lorem in laoreet interdum, 
        justo nisi convallis lorem, nec auctor magna lorem a massa. Duis sit amet condimentum velit. 
        Donec dolor nisl, tristique vel sem eu, auctor consequat urna. 
        Aenean non risus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
      </p>
      <p>
        Curabitur vestibulum justo sed scelerisque ultricies. Donec tempor eros et sapien iaculis hendrerit. 
        Sed lobortis, velit non pulvinar mattis, nulla leo congue elit, eget pellentesque metus urna eget lorem. 
        Integer ac dignissim quam. Sed quis urna magna. Curabitur auctor neque a eros porttitor ullamcorper.
      </p>
      <p>
        Praesent commodo, orci ut facilisis dignissim, tortor mi euismod sem, sed eleifend massa justo eget felis. 
        Duis fermentum elementum risus id vestibulum. Morbi interdum faucibus augue, at consectetur sapien tincidunt eget.
      </p>
    </div>
    <button class="readmore-toggle" id="readmoreToggle">続きを読む</button>
  </div>
/* ------------------------------------
 * 「続きを読む」周りのコンテナ
 * ------------------------------------ */
.readmore-container {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
background: #fff;
padding: 2rem;
}

/* ------------------------------------
 * 折りたたむエリア 
 * transition をつけ、max-heightで高さを管理
 * ------------------------------------ */
.readmore-content {
  /* 折りたたみ時の高さを設定（必要に応じて調整） */
  max-height: 150px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease-in-out;
}

/* 疑似要素で下部にグラデーションをかけて「テキストが薄れていく」演出 */
.readmore-content::after {
  content: "";
  position: absolute;
  pointer-events: none;
  bottom: 0;
  left: 0;
  width: 100%;
  /* 高さはボタンと被らない程度に。大きすぎるとグラデーション領域が広くなりすぎる */
  height: 60px;
  /*
   * 透明 → 白 のグラデーション
   * 例として一番下は白(#fff)にしていますが、背景色によって調整する
   */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 60%);
  transition: opacity 0.4s ease-in-out;
}

/* .is-active が付与されたら高さを十分な値に変更し、全テキストを表示できるようにする */
.readmore-content.is-active {
  max-height: 1000px; /* 必要に応じて、十分に大きい値にする */
}

/* 展開時はグラデーションを消す */
.readmore-content.is-active::after {
  opacity: 0;
}

/* ------------------------------------
 * 「続きを読む」ボタン
 * ------------------------------------ */
.readmore-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  border: none;
  background: #007acc;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: background 0.3s ease-in-out;
}

.readmore-toggle:hover {
  background: #005999;
}
document.addEventListener("DOMContentLoaded", function() {
  const readmoreToggle = document.getElementById("readmoreToggle");
  const readmoreContent = document.getElementById("readmoreContent");

  readmoreToggle.addEventListener("click", function() {
    // .is-active クラスのトグル
    readmoreContent.classList.toggle("is-active");
    
    // ボタンの表示文言を切り替え
    if (readmoreContent.classList.contains("is-active")) {
      readmoreToggle.textContent = "閉じる";
    } else {
      readmoreToggle.textContent = "続きを読む";
    }
  });
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum erat eget commodo egestas. Vivamus consequat, nunc ac malesuada pretium, lectus libero varius quam, et imperdiet neque arcu nec est. Nullam suscipit erat in eros dapibus, at fringilla orci semper. Sed suscipit, lorem in laoreet interdum, justo nisi convallis lorem, nec auctor magna lorem a massa. Duis sit amet condimentum velit. Donec dolor nisl, tristique vel sem eu, auctor consequat urna. Aenean non risus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Curabitur vestibulum justo sed scelerisque ultricies. Donec tempor eros et sapien iaculis hendrerit. Sed lobortis, velit non pulvinar mattis, nulla leo congue elit, eget pellentesque metus urna eget lorem. Integer ac dignissim quam. Sed quis urna magna. Curabitur auctor neque a eros porttitor ullamcorper.

Praesent commodo, orci ut facilisis dignissim, tortor mi euismod sem, sed eleifend massa justo eget felis. Duis fermentum elementum risus id vestibulum. Morbi interdum faucibus augue, at consectetur sapien tincidunt eget.

サンプルコード

<div class="content-wrapper">
    <div class="read-more-content">
      <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
      <p>しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕まえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>
      <p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った。</p>
      <p>というのは眼がいくつもついている。後でこの事を知った時、以前から猫にいくつも眼をつけていると言う人を見たことがあるのを思い出した。</p>
    </div>
    <button class="read-more-button">続きを読む</button>
  </div>
<style>
    .content-wrapper {
      max-width: 600px;
      margin: 20px auto;
      font-family: sans-serif;
background: #fff;
padding: 2rem;
    }

    .read-more-content {
      position: relative;
      overflow: hidden;
      max-height: 100px; /* 初期の高さ */
      transition: max-height 0.5s ease-in-out;
    }

    /* is-active クラスが付いた時の高さ */
    .read-more-content.is-active {
      max-height: 1000px;
    }

    /* グラデーションの疑似要素 */
    .read-more-content::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 90%
      );
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    /* is-active時はグラデーションを非表示 */
    .read-more-content.is-active::before {
      opacity: 0;
    }

    .read-more-button {
      display: block;
      width: 100%;
      padding: 10px;
      background: #f0f0f0;
      border: none;
      border-radius: 5px;
      margin-top: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .read-more-button:hover {
      background: #e0e0e0;
    }
  </style>
document.querySelector('.read-more-button').addEventListener('click', function() {
      const content = document.querySelector('.read-more-content');
      content.classList.toggle('is-active');
      
      // ボタンのテキストを切り替え
      this.textContent = content.classList.contains('is-active') ? '閉じる' : '続きを読む';
    });

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕まえて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った。

というのは眼がいくつもついている。後でこの事を知った時、以前から猫にいくつも眼をつけていると言う人を見たことがあるのを思い出した。

新規記事

すべてを見る
人気記事ランキング
SEOサンプル記事
話題のキーワードから探す