mk-webwork codenote
グラデーションで隠して「もっと見る」で開閉する
矢印アイコン

グラデーションで隠して「もっと見る」で開閉する

  • JavaScript
  • 動くデザイン
<!-- ========================================  
  グラデーションで隠して「もっと見る」で開閉  
========================================  -->
<section id="accordion-GrD" >
   
   <div class="content" >
     <div class="OpenBtn accordion-GrD__OpenTrigger"></div>
     <article class="accordion-GrD__area">
         <h3 >アコーディオンタイトル</h3>
         <div>
           <ul>
             <li>
               <p>テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
                 テキストテキストテキストテキスト<br>
               </p>
             </li>
             <li>         
                 <img src="img/1437.png" alt="">
                 <img src="img/1418.png" alt="">
             </li>
           </ul>
         </div>
         <div class="margin-box"></div>
       </article>
   </div>


</section>
/* =================================== */
/*   グラデーションで隠して「もっと見る」で開閉  */
/* =================================== */
/* ボタンの装飾 */
#accordion-GrD .content {
  position: relative;
}
#accordion-GrD .OpenBtn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 60px;
  width: 90%;
  max-width: 360px;
  margin: 0 auto 40px;
  border: 1px solid #000;
  background-color: #FFF;
  color: #000;
  font-size: 1.6rem;
  z-index: 10;
  cursor: pointer;
}
/* openタグがない時 */
#accordion-GrD .OpenBtn::before {
  content: "もっと見る";

}
#accordion-GrD .OpenBtn::after{
  position: absolute;
  content: "＋";
  right: 5em;

}
/* openタグが付与された時 */
#accordion-GrD .OpenBtn.open::before {
  content: "閉じる";
}
#accordion-GrD .OpenBtn.open::after{
  position: absolute;
  content: "－";
  right: 5em;
}


#accordion-GrD .accordion-GrD__area{
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 0 0;
  border: 1px solid #000;
  background-color: #f0f8ff;
  text-align: center;
} 

/* コンテンツが隠れているときの、高さを指定 */
#accordion-GrD .accordion-GrD__area.is-hide {
  overflow: hidden;
  height: 300px;
}

/* コンテンツが隠れているときの、グラデーション */
#accordion-GrD .accordion-GrD__area.is-hide::after {
  content:"";
  position: absolute;
  display: inline-block;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 80%;
  transition: 1s;
  background: linear-gradient(
      transparent 0%,#ffffff 60% );
}

#accordion-GrD .accordion-GrD__area h3 {
  margin-bottom: 20px;
  font-size: 2.4rem;
}
#accordion-GrD .accordion-GrD__area p {
  margin-bottom: 40px;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* コンテンツが開いているときのBtn用余白 */
#accordion-GrD .margin-box {
  display: block;
  width: 100%;
  height: 100px;
}





// ==========================================
//  グラデーションで隠して「もっと見る」で開閉 
// ==========================================
const itemHeights = [];
let returnHeight;

$(function () {
  $(".accordion-GrD__area").each(function () {
    // 隠す要素
    const thisHeight = $(this).height(); // 隠す要素の高さを取得
    itemHeights.push(thisHeight); // それぞれの高さを配列に入れる
    $(this).addClass("is-hide"); // CSSで指定した高さにする(見えてる高さ)
    returnHeight = $(this).height(); // 見えてる高さを取得
  });
});

$(".accordion-GrD__OpenTrigger").click(function () {
  // ボタンをクリックしたら
  if (!$(this).hasClass("open")) {
    const index = $(this).index(".accordion-GrD__OpenTrigger");
    const addHeight = itemHeights[index]; // 要素の高さを取得
    $(this)
      .addClass("open") // openクラスを付与し「閉じる」ボタンに表示変更
      .next()
      .animate({ height: addHeight }, 500) // 隠されてる要素をアニメーションで表示
    $(".accordion-GrD__area")
      .removeClass("is-hide")
  } else {
    $(this)
      .removeClass("open") // 閉じるボタン表示解除
      .next()
      .animate({ height: 300 }, 500) // 要素の高さをアニメーションで戻す（「is-hide」の高さと同じ値を指定）
    $(".accordion-GrD__area")
      .addClass("is-hide")
  }

//  ※PC幅でコンテンツ（is-hide）の高さを変更する場合
//  幅変わらないなら以下不要

// *スマホ処理
//  else if (window.matchMedia('(max-width: 767px)').matches) {
//        $(this)
//          .removeClass("open") // 閉じるボタン表示解除
//          .next()
//          .animate({ height: 300 }, 500) // 要素の高さをアニメーションで戻す（「is-hide」の高さと同じ値を指定）
//        $(".accordion-area")
//          .addClass("is-hide")
//      }

// *PC処理
//  else if (window.matchMedia('(min-width:768px)').matches) {

//        $(this)
//          .removeClass("open") // 閉じるボタン表示解除
//          .next()
//          .animate({ height: 150 }, 500) // 要素の高さをアニメーションで戻す（「is-hide」の高さと同じ値を指定）
//        $(".accordion-area")
//          .addClass("is-hide")
//      }
});
←　もどる