HTML: details/summary要素を使ってカスタムアコーディオンを作るメモ📝

details/summary要素を使うと

developer.mozilla.org

以下のようなアコーディオンのようなUIをブラウザ標準機能として簡単に実装できます。

<details>
  <summary >accordion</summary>
  <div >Hello!!</div>
</details>

以下のようなアイコン等をカスタムしたアコーディオンを作るときにちょっとハマりどころがあったのでメモ📝

結論は以下のようなコードになりました。

See the Pen custom-accordion-by-details-tag by madogiwa (@madogiwa0124) on CodePen.

<details class="accordion">
  <summary class="accordion-summary">accordion</summary>
  <div class="accordion-content">Hello!!</div>
</details>

.accordion {
  padding: 0;
  margin: 20px 0;
  border: 1px solid black;

  &[open] {
    .accordion-summary {
      &::after {
        content: 'Close';
      }
    }
  }
  
  .accordion-summary {
   cursor: pointer;
   background-color: grey;
   padding: 8px;
   
   /* デフォルトアイコンの削除 */ 
   list-style: none;
   &::-webkit-details-marker { /* for safari */ 
     display: none
   }

   &::after {
    content: 'Open'; 
    font-size: 16px;
    float: right; /* アイコンを右端に配置 */
   }
  }
  
  .accordion-content{
     padding: 8px;
   }
}

ポイントとしては、

• デフォルトアイコンはlist-style: none;とsummaly::-webkit-details-marker{ display: none; }で消すことができる。

  • 折りたたみウィジェットのアイコンは list-style: none と設定することで削除することができます。 <details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN

  • Webkit ベースのブラウザーでは、標準外の CSS 擬似要素 ::-webkit-details-marker によって、アイコンの表示を制御することが可能です。三角形の表示を消すには、 summary::-webkit-details-marker { display: none } を使用してください。 <summary>: 概要明示要素 - HTML: ハイパーテキストマークアップ言語 | MDN

• 右端にアコーディオンの開閉アイコンを置きたい場合には上記のようにデフォルトアイコンを消しつつ、::after擬似要素を使って独自のアイコンを表示させてfloat: right;で右端に配置してタイトルを回り込ませるようにした。(もっといいやり方ありそう)

おわり

参考

catnose.me

note.com