【Cocoonカスタマイズ】「タイムライン」ブロックを折りたたみ表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

「タイムライン」ブロックの各項目を折りたたみ表示に変更します。

初期状態では、1番目の項目のみが展開されており、他の項目は閉じられています。
ユーザーが項目をクリックすると、その項目が展開され、他の項目は自動的に閉じるように設定します。

この記事では、この方法について説明します。

完成イメージ

1回目
ホワイトスネイク

生物の記憶とスタンド能力を、CDのような形状の「DISC」にして取り出す、能力を持つ。
2回目
C-MOON

ホワイトスネイクと、緑色の赤ちゃんが融合してできたスタンド。
半径約3km以内にある物体の重力の方向を、本体のプッチ神父を中心に、逆転させる能力を持つ。
3回目
メイド・イン・ヘブン

C-MOONが進化したスタンド。
全世界の時を、加速させる能力を持つ。

実装手順

以下の手順で実装します。

jQuery(function ($) {
  $('.timeline-item-label, .timeline-item-title').css('cursor', 'pointer');

  // 全アイテムを非表示
  $('.timeline-item-snippet').hide();

  // 「タイムライン」ブロックの1番目のアイテムを表示
  $('.timeline').each(function () {
    $(this).children('.timeline-item').first().find('.timeline-item-snippet').show();
  });

  // アイテムクリックの場合
  $('.timeline').on('click', '.timeline-item-label, .timeline-item-title', function (e) {
    e.stopPropagation();

    var $currentSnippet = $(this).closest('.timeline-item').find('.timeline-item-snippet');

    // 既に表示されているアイテムの場合
    if ($currentSnippet.is(':visible')) {
      return;
    }

    // ブロック内のクリックしたアイテムのみ表示
    $(this).closest('.timeline').find('.timeline-item-snippet').hide();
    $currentSnippet.show();
  });
});

さいごに

今回紹介した方法を使えば、「タイムライン」ブロックを折りたたみ表示に変更し、1番目の項目を展開した状態で表示できます。
クリックした項目のみが展開され、他の項目は自動的に閉じるため、情報を整理して見やすくするのに最適です。