Web Design Leaves

<details open><!-- details 要素に open 属性を指定 -->
  <summary>詳細を見る</summary>
  <p>詳細の内容（開いた状態で表示される）</p>
</details>

details[open] {
  /* details 要素の内容が表示されている時の details 要素のスタイル */
}

details[open] summary {
  /* details 要素の内容が表示されている時の summary 要素のスタイル */
}

details {
  border: 1px solid #aaa;
  padding: 0.5rem 0.5rem 0;
  max-width: 300px;
}

summary {
  font-weight: bold;
  margin: -0.5rem -0.5rem 0; /* details に指定した padding のスペースを相殺 */
  padding: 0.5rem;
}

details[open] {
  /* 開いている時の details 要素のスタイル */
  padding-bottom: 0.5rem;
}

details[open] summary {
  /* 開いている時の summary 要素のスタイル */
  border-bottom: 1px solid #aaa;
}

<details>
  <summary>詳細を見る</summary>
  <p>詳細の内容</p>
</details>

<details>
  <summary>詳細を見る</summary>
  <div class="details-content">
    <p>詳細の内容</p>
  </div>
</details>

details {
  border: 1px solid #aaa;
  max-width: 300px;
}

/* details 要素のコンテンツをラップした要素にスタイルを指定 */
details .details-content {
  padding: 0.5rem;
}

summary {
  font-weight: bold;
  padding: 0.5rem;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
}

summary::marker {
  color: red;
  font-size: 18px;
}

summary::-webkit-details-marker {
  color: red;
  font-size: 18px;
}

<div class="details-wrapper">
  <details>
    <summary>詳細を見る</summary>
    <div class="details-content">
      <p>詳細の内容</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit..</p>
    </div>
  </details>
  ・・・中略・・・
  <details>
    <summary>詳細を見る</summary>
    <div class="details-content">
      <p>詳細の内容</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit...</p>
    </div>
  </details>
</div>

details {
  border: 1px solid #aaa;
  max-width: 300px;
}

.details-wrapper details {
  border-bottom: none;
}

.details-wrapper details:last-child {
  border-bottom:  1px solid #aaa;
}

details .details-content {
  padding: 1rem 1rem 1rem 2rem;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5rem;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
}

/* ＋のアイコンの疑似要素（縦と横の棒の共通の設定） */
details summary::before,
details summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #333;
  width: 16px;
  height: 3px;
}

/* 縦棒は90度回転 */
details summary::after {
  transform: rotate(90deg);
}

/* 閉じる際の横棒のアニメーションの指定（省略可能） */
details summary::before {
  animation: closing-before 0.3s ease-in;
}
/* 閉じる際の縦棒のアニメーションの指定 */
details summary::after {
  animation: closing-after 0.3s ease-in;
}
/* 閉じる際の横棒のアニメーション（省略可能） */
@keyframes closing-before {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* 閉じる際の縦棒のアニメーション */
@keyframes closing-after {
  0% {
    transform: rotate(180deg);
    opacity: 0;
  }
  100% {
    transform: rotate(90deg);
    opacity: 1;
  }
}
/* 開く際の横棒のアニメーションの指定（省略可能） */
details[open] summary::before {
  animation: opening-before 0.3s ease-in forwards;
}
/* 開く際の縦棒のアニメーションの指定 */
details[open] summary::after {
  animation: opening-after 0.3s ease-in forwards;
}
/* 開く際の横棒のアニメーション（省略可能） */
@keyframes opening-before {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
/* 開く際の縦棒のアニメーション */
@keyframes opening-after {
  0% {
    transform: rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: rotate(180deg);
    opacity: 0;
  }
}

//  DOM ツリーの構築が完了したら定義した関数を呼び出す
document.addEventListener('DOMContentLoaded', () => {
  setupToggleDetailsAnimation3();
});

// アニメーションの処理を定義した関数
function setupToggleDetailsAnimation3() {
  // .details-wrapper 配下のすべての details 要素
  const details = document.querySelectorAll('.details-wrapper details');

  // details 要素を閉じる関数
  function close(el) {
    // details-content クラスを指定した要素
    const content = el.querySelector('.details-content');
    // details-content クラスを指定した要素を閉じるアニメーション
    const closeDetails = content.animate(
      {
        opacity: [1, 0],
        height: [content.offsetHeight + 'px', 0],
      },
      {
        duration: 300,
        easing: 'ease-in',
      }
    );
    //summary 要素
    const summary = el.querySelector('summary');
    //閉じる際の ::before（横棒）のアニメーション
    const rotate1 = summary.animate(
      {
        rotate: ["180deg", "0deg"],
      },
      {
        duration: 300,
        pseudoElement: "::before",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
    //閉じる際の ::after（縦棒）のアニメーション
    const rotate2 = summary.animate(
      {
        rotate: ["90deg", "0deg"],
        opacity: [0, 1]
      },
      {
        duration: 300,
        pseudoElement: "::after",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
    closeDetails.onfinish = () => {
      el.removeAttribute('open');
    }
  }

  //現在開いている details 要素を閉じる関数
  function closeOpenedDetails(detailsElems) {
    detailsElems.forEach(elem => {
      if (elem.open) {
        //開いた状態であれば close() を呼び出して閉じる
        close(elem);
      }
    });
  }

  // 上記で取得したそれぞれの要素に対して以下を実行（elem は各 details 要素）
  details.forEach(elem => {
    // summary 要素
    const summary = elem.querySelector('summary');
    // details-content クラスを指定した要素
    const content = elem.querySelector('.details-content');

    // summary 要素にクリックイベントのリスナを設定
    summary.addEventListener('click', (e) => {
      e.preventDefault();
      //現在開いている details 要素があれば閉じる
      closeOpenedDetails(details);
      if (elem.open) {
        //開いていれば閉じる
        close(elem);
      } else {
        elem.setAttribute('open', 'true');
        // details-content クラスを指定した要素を開くアニメーション
        const openDetails = content.animate(
          {
            opacity: [0, 1],
            height: [0, content.offsetHeight + 'px'],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        //開く際の ::before（横棒）のアニメーション
        const rotate1 = summary.animate(
          {
            rotate: ["0deg", "180deg"],
          },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        //開く際の ::after（縦棒）のアニメーション
        const rotate2 = summary.animate(
          {
            rotate: ["0deg", "90deg"],
            opacity: [1, 0]
          },
          {
            duration: 300,
            pseudoElement: "::after",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
      }
    });
  });
};

//  DOM ツリーの構築が完了したら定義した関数を呼び出す
document.addEventListener('DOMContentLoaded', () => {
  setupToggleDetailsAnimation4();
});

// アニメーションの処理を定義した関数
function setupToggleDetailsAnimation4() {
  const details = document.querySelectorAll('details.js-animation');
  details.forEach(elem => {
    const summary = elem.querySelector('summary');
    const content = elem.querySelector('.details-content');
    //アニメーション中かどうかを表すフラグ
    let isAnimating = false;
    summary.addEventListener('click', (e) => {
      e.preventDefault();
      // 連続するクリックの制御。アニメーション中の場合はリターン（何もしない）
      if (isAnimating === true) {
        return;
      }
      if (elem.open) {
        // 連続するクリックの制御。アニメーション中とする（isAnimating を true に）
        isAnimating = true;
        const closeDetails = content.animate(
          {
            opacity: [1, 0],
            height: [content.offsetHeight + 'px', 0],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        const rotateIcon = summary.animate(
          { rotate: ["90deg", "0deg"] },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        closeDetails.onfinish = () => {
          elem.removeAttribute('open');
          // 連続するクリックの制御。アニメーション終了（isAnimating を false に）
          isAnimating = false;
        }
      } else {
        elem.setAttribute('open', 'true');
        // 連続するクリックの制御。アニメーション中（isAnimating を true に）
        isAnimating = true;
        const openDetails = content.animate(
          {
            opacity: [0, 1],
            height: [0, content.offsetHeight + 'px'],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        const rotateIcon = summary.animate(
          { rotate: ["0deg", "90deg"] },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        openDetails.onfinish = () => {
          // 連続するクリックの制御。アニメーション終了（isAnimating を false に）
          isAnimating = false;
        }
      }
    });
  });
};

//  DOM ツリーの構築が完了したら定義した関数を呼び出す
document.addEventListener('DOMContentLoaded', () => {
  setupToggleDetailsAnimation6();
});

// アニメーションの処理を定義した関数
function setupToggleDetailsAnimation6() {
  const details = document.querySelectorAll('.details-wrapper details');
  function close(el) {
    const content = el.querySelector('.details-content');
    const summary = el.querySelector('summary');
    // 連続するクリックの制御。アニメーション中
    summary.dataset.isAnimating = 'true';
    const closeDetails = content.animate(
      {
        opacity: [1, 0],
        height: [content.offsetHeight + 'px', 0],
      },
      {
        duration: 300,
        easing: 'ease-in',
      }
    );
    const rotate1 = summary.animate(
      {
        rotate: ["180deg", "0deg"],
      },
      {
        duration: 300,
        pseudoElement: "::before",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
    const rotate2 = summary.animate(
      {
        rotate: ["90deg", "0deg"],
        opacity: [0, 1]
      },
      {
        duration: 300,
        pseudoElement: "::after",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
    closeDetails.onfinish = () => {
      el.removeAttribute('open');
      // 連続するクリックの制御。アニメーション終了（isAnimating の値を true 以外に変更）
      summary.dataset.isAnimating = 'false';
    }
  }

  function closeOpenedDetails(detailsElems) {
    detailsElems.forEach(elem => {
      if (elem.open) {
        close(elem);
      }
    });
  }

  details.forEach(elem => {
    const summary = elem.querySelector('summary');
    const content = elem.querySelector('.details-content');
    summary.addEventListener('click', (e) => {
      e.preventDefault();
      // 連続するクリックの制御。アニメーション中の場合はリターン（何もしない）
      if (summary.dataset.isAnimating === 'true') {
        return;
      }
      closeOpenedDetails(details);
      if (elem.open) {
        close(elem);
      } else {
        elem.setAttribute('open', 'true');
        // 連続するクリックの制御。アニメーション中
        summary.dataset.isAnimating = 'true';
        const openDetails = content.animate(
          {
            opacity: [0, 1],
            height: [0, content.offsetHeight + 'px'],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        const rotate1 = e.currentTarget.animate(
          {
            rotate: ["0deg", "180deg"],
          },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        const rotate2 = e.currentTarget.animate(
          {
            rotate: ["0deg", "90deg"],
            opacity: [1, 0]
          },
          {
            duration: 300,
            pseudoElement: "::after",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        openDetails.onfinish = () => {
          // 連続するクリックの制御。アニメーション終了（isAnimating の値を true 以外に変更）
          summary.dataset.isAnimating = 'false';
        }
      }
    });
  });
};

//  DOM ツリーの構築が完了したら定義した関数を呼び出す
document.addEventListener('DOMContentLoaded', () => {
  setupToggleDetailsAnimation7();
});

// アニメーションの処理を定義した関数
function setupToggleDetailsAnimation7() {
  const details = document.querySelectorAll('.details-wrapper details');

  // details 要素を閉じる関数
  function close(el) {
    const content = el.querySelector('.details-content');
    const summary = el.querySelector('summary');
    const closeDetails = content.animate(
      {
        opacity: [1, 0],
        height: [content.offsetHeight + 'px', 0],
      },
      {
        duration: 300,
        easing: 'ease-in',
      }
    );
    const rotate1 = summary.animate(
      {
        rotate: ["180deg", "0deg"],
      },
      {
        duration: 300,
        pseudoElement: "::before",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
    const rotate2 = summary.animate(
      {
        rotate: ["90deg", "0deg"],
        opacity: [0, 1]
      },
      {
        duration: 300,
        pseudoElement: "::after",
        easing: 'ease-in',
        fill: 'forwards',
      }
    );
    //アニメーションオブジェクトを返す
    return closeDetails;
  }

  //現在開いている details 要素を閉じる関数
  function closeOpenedDetails(detailsElems) {
    detailsElems.forEach(elem => {
      if (elem.open) {
        // close() を実行して戻り値を変数に代入
        const closeDetails = close(elem);
        // 戻り値のアニメーションが終了したら open 属性を削除
        closeDetails.finished.then( () => {
          // open 属性を削除
          elem.removeAttribute('open');
        });
      }
    });
  }

  details.forEach(elem => {
    const summary = elem.querySelector('summary');
    const content = elem.querySelector('.details-content');
    //アニメーション中かどうかを表すフラグ
    let isAnimating = false;
    summary.addEventListener('click', (e) => {
      e.preventDefault();
      // アニメーション中の場合はリターン（何もしない）
      if (isAnimating === true) {
        return;
      }
      closeOpenedDetails(details);
      if (elem.open) {
        // アニメーション中
        isAnimating = true;
        // close() を実行して戻り値を変数に代入
        const closeDetails = close(elem);
        // 戻り値のアニメーションが終了したら
        closeDetails.finished.then( () => {
          // open 属性を削除
          elem.removeAttribute('open');
          // アニメーション終了
          isAnimating = false;
        });
      } else {
        elem.setAttribute('open', 'true');
        // アニメーション中
        isAnimating = true;
        const openDetails = content.animate(
          {
            opacity: [0, 1],
            height: [0, content.offsetHeight + 'px'],
          },
          {
            duration: 300,
            easing: 'ease-in',
          }
        );
        const rotate1 = e.currentTarget.animate(
          {
            rotate: ["0deg", "180deg"],
          },
          {
            duration: 300,
            pseudoElement: "::before",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        const rotate2 = e.currentTarget.animate(
          {
            rotate: ["0deg", "90deg"],
            opacity: [1, 0]
          },
          {
            duration: 300,
            pseudoElement: "::after",
            easing: 'ease-in',
            fill: 'forwards',
          }
        );
        openDetails.finished.then( () => {
          // アニメーション終了
          isAnimating = false;
        });
      }
    });
  });
};