jQueryで文章をグラデーションで隠してアニメーションで開閉するボックスを作った

2019年10月16日WordPress

A box that opens and closes an animation with a jquery

長い文章の冒頭部分をグラデーション表示させておいてボタンをクリックすると開き、またボタンをクリックすると閉じるというものです。開閉動作はアニメーションにしました。

概要

本文中にユーザーが必要に応じて開閉できるボックスを設置したくて作成してみました。例えば、長い補足説明とか解説、ソースコードなどを対象にするといいでしょう。

CSSだけで実現する方法もありますが、HTMLが複雑になる(input要素が必要など)、アニメーションがうまくいかない、などの理由でjQueryで実装することにしました。

デモ

See the Pen アニメーションで開閉するパネル by hatenachips (@hatena19) on CodePen.

仕様

  • HTMLはdivタグで囲むだけというシンプルなものにしました。WordPressのテーマなどHTMLを簡単に変更できない場合にも簡単に実装できます。
  • 開閉ボタンはjQueryで追加するようにしました。対象要素が複数あってもすべてに追加できます。
  • ただし、対象要素の高さが規定値より小さい場合は開閉ボタンを追加しません。
  • 文章のグラデーションはCSSの疑似要素のグラデーションで覆うことで実装しました。
  • 開閉ボタンはボックスの最下部に配置してますが、ボックス内の文章が長いときに普通に閉じるとボックスが画面より上に移動してしまうので、開閉ボタン位置が移動しないようにスクロールさせてます。

コード

ＨＴＭＬ

<div class="wrapper">
  <div class="text_wrapper">
    <p>開閉テキスト</p>
    <p>開閉テキスト</p>
  </div>
  <p>テキスト</p>
  <p>テキスト</p>
  <div class="text_wrapper">
    <p>開閉テキスト</p>
    <p>開閉テキスト</p>
  </div>
  <p>テキスト</p>
  <p>テキスト</p>
</div>

開閉したいテキストをtext_wrapperクラスで囲みます。。

ＣＳＳ

.wrapper{
  width: 640px;
  margin: 30px auto;
  font-size: 1rem;
  line-height: 1.5;
}
.text_wrapper{
  position: relative;
  margin-bottom: 20px;
  padding: 0 20px 20px;
  border: solid 1px;
  height: auto;
  overflow: hidden;
}

.show_more{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  padding-top: 70px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(to bottom, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);
  cursor: pointer;
}
.open .show_more {
  background: transparent;
}
h1{
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.show_more:before {
border-right: 3px solid #0288d1;
    border-top: 3px solid #0288d1;
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    transition: all 0.5s;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
} 
.active .show_more:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

jQuery

$(function(){
    var min_height = 150; //initial height.
    var ani_duration = 500;
    $('.text_wrapper').each(function(index) {
      if ($(this).height()>min_height + 50) {  
        $(this).height(min_height).append('<div class="show_more"></div>');
      }
    });

    $('.show_more').click(function(){
        var athis = $(this);
        var show_text = athis.parent('.text_wrapper');
        var original_height = show_text.css({height : 'auto'}).height();

        if(show_text.hasClass('open')){
          //--CLOSE--
          var scroll_offset = $("html,body").scrollTop() - original_height + min_height;

          $("html,body").animate({ scrollTop: scroll_offset }, ani_duration);
          show_text.animate({height:min_height}, ani_duration, function(){
          });
          show_text.removeClass('active').removeClass('open');
        }else{
            //--OPEN--
            show_text.height(min_height).animate({height:original_height},ani_duration, function(){
            show_text.height('auto').addClass('open');
          });
          show_text.addClass('active');
        }
    });
})

まとめ

タグで囲まれた特定のボックス範囲を開閉したいときに、HTMLはそのままで開閉できるので、導入は楽だと思います。

hatenaは、当ブログに長いソースコードを掲載する場合、ソースコードで占有されてしまうので、閲覧者が開閉できるようにしたいと思い作成してみました。

次の記事で、当ブログのテーマ Luxeritas のシンタックスハイライターに実装する方法を紹介しますので、Luxeritasユーザーの方はご期待ください。

WordPressCSS,HTML,JavaScript,jQuery,WordPress

Posted by hatena