ウェブ制作

要素を途中まで見せて、ボタンクリックで全体を表示する

こくまこ

最初に要素の一部を見せておいて、ボタンをクリックしたら全体を表示するにはどうしたらいいの？

大きな表や画像など、最初は一部だけ見せておいて、ボタンをクリックしたら全体を表示させる手法がたまに出てきます。今回はその実装方法を解説します。

実装例

まず最初に実装例を示します。

See the Pen Untitled by 小久保亮 (@llnuwljx-the-styleful) on CodePen.

「すべて表示」のボタンをクリックすると隠れていた部分がスライドで表示されます。

コードの解説

コードの解説をしていきます。

HTMLの解説

  <div class="inner">
    <figure class="imgWrap js-slideToggle">
      <img src="https://placehold.jp/800x1000.png" alt="" class="img">
    </figure>
    <!-- /.p-past__imgWrap -->
    <div class="btnWrap">
      <button class="btn js-open">すべて表示▼</button>
      <!-- /.p-past__btn -->
    </div>
    <!-- /.p-past__btnWrap -->
  </div>
  <!-- /.inner -->

innerクラスのdivはレイアウト様です。左右中央寄せと余白を調整しています。

大切なのはjs-openクラスとjs-slideToggleクラスです。
js-openクラスは隠れている画像を見せたり隠したりするきっかけとなるbutton要素につけています。
js-slideToggleクラスは「この要素が隠れていたり、見えたりする」目印です。

CSSの解説

figure{
  margin: 0;
}
.inner{
  width: 1000px;
  max-width: calc(335 / 375 * 100%);
  margin: auto;
}
.imgWrap {
  overflow: hidden;
  position: relative;
}
.imgWrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.imgWrap.isOpen .img {
    max-height: 2000px;
}
.imgWrap.isOpen::after {
  opacity: 0;
}
.img {
  width: 100%;
  display: block;
  max-height: 200px;
  transition: max-height 0.5s ease-in-out;
  object-fit: cover;
  object-position: top;
}
.btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.btn {
}

imgクラスに対して指定している max-height:200px;で最初に見せたい大きさを指定します。
さらにobject-fit: cover; とobject-position: top;を指定することで画像の上の部分だけ少し見せることができます。

imgWrap.isOpen .imgに対してはmax-height: 2000px;を指定していますが、これは表示される画像よりも大きな数値にすれば画像全体が表示されます。
反対に表示される画像よりも短いmax-heightを指定すると画像が途中で見切れてしまいますので、余裕を持って大きめな数値を指定すると良いです。

JavaScriptの解説

const slideToggle = document.querySelector(".js-slideToggle");
const openButton = document.querySelector(".js-open");

openButton.addEventListener("click", () => {
  slideToggle.classList.toggle("isOpen");
});

このコードはjs-openクラスがついている要素をクリックしたときにjs-slideToggleクラスがついている要素に対してisOpenクラスをつけたり消したりすることができます。

このようにクラスをつけたり消したりすることで画面上の要素を操作することはとても良くありますので、この機会に覚えておくとよいです。

今回は以上です。

-ウェブ制作