アコーディオンパネル

縦・横の限られたスペースに複数のコンテンツを繰り返し表示させたいときに利用する

HTMLの構造

すべての要素を表示
GoogleMapのiframeは、最後に挿入
class名、id名は適宜追加します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>jQueryを使ったアコーディオンパネル</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
  <dl class="accordion">
    <dt>今日の日付・曜日</dt>
    <dd id="today">ここに今日の日付が入る</dd>
    <dt>今日の運勢</dt>
    <dd id="fortune">ここに今日の運勢が入る</dd>
    <dt>現在の位置</dt>
    <dd class="map"><iframe class="gmap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d404.88387586410454!2d139.71540566706435!3d35.724472174055464!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6bea38baf5%3A0xd4518337f74a83a7!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yT5LiB55uu77yR77yY4oiS77yU77yQIOOCt-ODnuODk-ODqw!5e0!3m2!1sja!2sjp!4v1632998899793!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy"></iframe></dd>
  </dl>
</div><!-- /.content -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

CSSの記述

@charset "UTF-8";

/* ---------------------------------------
  reset
--------------------------------------- */
* {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

/* ---------------------------------------
  body
--------------------------------------- */
body {
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.0;
}

/* ---------------------------------------
  layout
--------------------------------------- */
.content {
  width: 92%;
  max-width: 600px;
  margin: 50px auto;
}

/* ---------------------------------------
  accordion
--------------------------------------- */
.accordion > dt {
  padding: 16px 0;
  background: #008080;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.accordion > dd {
  padding: 20px 0;
  border: 1px solid #008080;
  border-top: 0;
  text-align: center;
  font-size: 20px;
}

/* 以下はGoogleMapと
　 JavaScriptで追加したclass名に対して */
dd.map {
  padding: 10px;
}
.gmap {
  width: 100%;
  height: 50vh;
}
dt.open {
  background: #000;
}
dd.good {
  color: #f00;
  font-size: 3.0rem;
  font-weight: bold;
}

jQueryの記述

bodyの終了タグの前に記述する場合は、以下の記述を省略も可能です

<script>
$(function(){

});
</script>

利用する jQueryメソッド

slideDown / slideUp（displayがblockに、noneに変化する途中のアニメーション効果）
「slideToggle」の場合は、アコーディオンメニューでメニュー内容を繰り返し確認したいときに利用します

アルゴリズムフロー

閉じているパネルが開くとき、開いているパネルをすべて閉じる

<script>
  // パネル要素（dd）を非表示にする
  $('dd').hide();
</script>

タブをクリックするとパネルが開く

<script>
  $('dd').hide();
  // クリックイベントで実行する関数を記述
  $('dt').on('click',function(){
      // クリックした要素（dt）の隣の要素をアニメーションを伴って下に開く
      $(this).next().slideDown(600);
  });
</script>

パネルが開くと同時にすでに空いているパネルを閉じる

<script>
  $('dd').hide();
  $('dt').on('click',function(){
      // パネル要素（dd）をアニメーションをともなって非表示にする
      $('dd').slideUp(600);
      $(this).next().slideDown(600);
  });
</script>

パネルがすでに開いているときには、動作しないように条件を追加する

<script>
  $('dd').hide();
  $('dt').on('click',function(){
    if ($(this).next().css('display') === 'none') {
      $('dd').slideUp(600);
      $(this).next().slideDown(600);
    }
  });
</script>

クリックされたタブにクラス名を追加する

<script>
  $('dd').hide();
  $('dt').on('click',function(){
    $('dt').removeClass('open');
    $(this).addClass('open');
    if ($(this).next().css('display') === 'none') {
      $('dd').slideUp(600);
      $(this).next().slideDown(600);
    }
  });
</script>

クリックされた時にクラス名を追加

同時に、すでにあるクラス名を削除

    $('dt').removeClass('open');
    $(this).addClass('open');

jQueryの記述を外部ファイルにする

script.js 内に移動

// jQueryの記述

  // アコーディオンパネル
  
  // パネル要素（dd）を非表示にする
  $('dd').hide();
  // クリックイベントで実行する関数を記述
  $('dt').on('click',function(){
    $('dt').removeClass('open');
    $(this).addClass('open');
    if($(this).next().css('display') === 'none'){
      // パネル要素（dd）をアニメーションをともなって非表示にする
      $('dd').slideUp('slow');
      // クリックした要素（dt）の隣の要素をアニメーションを伴って下に開く
      $(this).next().slideDown('slow');
    }
  });

一番上のタブは、すでに開いている状態にする（主にアコーディオンメニューの場合）

<script>
  $('dd:not(:first)').hide();
  $('dt').on('click',function(){
    $('dt').removeClass('open');
    $(this).addClass('open');
    if ($(this).next().css('display') === 'none') {
      $('dd').slideUp(600);
      $(this).next().slideDown(600);
    }
  });
</script>

パネル内にJavaScriptで取得した値を表示

今日の日付と曜日を表示

// 今日の日付の値を取得して表示
let today = new Date();
let year = today.getFullYear();
let month = today.getMonth()+1;
let date = today.getDate();
let day = today.getDay();
let week = ['日','月','火','水','木','金','土'];

let element = document.querySelector('#today');
element.textContent = `今日は、${year}年${month}月${date}日、${week[day]}曜日`;

今日の運勢を表示

// おみくじの結果をランダムに表示
let fortune = ['大吉','中吉','小吉','吉','凶'];
let luck = Math.floor(Math.random()*fortune.length);
  // console.log(luck);
let element2 = document.querySelector('#fortune');
element2.textContent = fortune[luck];
if (luck == 0) {
  element2.classList.add('good');
} else {xc
  element2.classList.remove('good');
}