nobee

update:　1588view

detailsタグで簡単アコーディオン

detailsタグで簡単アコーディオン

HTMLのdetails、summaryタグのみでアコーディオンができる優れもの！
cssもjqueryも不要だなんて優秀すぎて大活躍です。

こちらがイメージです！

メニュー

開いた時のテキストが入ります。開いた時のテキストが入ります。

記事のもくじ

HTMLのみアコーディオン

基本はこれだけで開閉開閉開閉！

<details class="accordion">
  <summary>メニュー</summary>
  <p>開いた時のテキストが入ります。開いた時のテキストが入ります。</p>
</details>

装飾前と装飾したものを分けるため、「accordion」というクラスをdetailsに付与しました。
装飾を全くしていないものが下記になります。

メニュー 開いた時のテキストが入ります。開いた時のテキストが入ります。

CSSで開閉時を装飾

まずは矢印のアイコンの変更をしていきましょう。

デフォルトでついてくる黒い三角矢印を消す方法

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

ブラウザによって黒い枠線が表示されるのでoutlineプロパティで非表示にします。

summary {
  outline: none;
  cursor:pointer;
}

カーソルがテキスト選択状態なので、そこは指にしてクリックできる、というのがわかりやすいので、カーソルはポインターに変更しました。

お次は矢印を変えてみましょ！！

三角矢印も自由自在

右端に「+」を設置で、開いたときは「-」に変えてみます。

details {
  position:relative;
}

summary::after {
  content: "＋";
  color: #000;
  font-weight: bold;
  font-size: 20px;
  position:absolute;
  top: 10%;
  right: 5%;
}

details[open] summary::after {
  content: "−";
}

details[open]で開いた時の装飾ができます。

開いた時の装飾も変更可能

details[open] {
  background: #fae3d9;
}

ざっとこんな感じです。
後は見やすいように余白を増やしたり、summaryのキャプションだけ背景色を変更かけた全体のcssです。

details.accordion{
  position:relative;
  margin: 30px 0;
}

details.accordion[open] {
  background: #fae3d9;
}

details.accordion summary::after {
  content: "＋";
  color: #000;
  font-weight: bold;
  font-size: 20px;
  position:absolute;
  top: 15%;
  right: 5%;
}

details.accordion[open] summary::after {
  content: "−";
  top: 15%;
}

details.accordion summary {
  background:#ffb6b9;
  display: block;
  outline: none;
  cursor:pointer;
  margin-bottom:10px;
  font-weight: bold;
  padding: 20px;
  box-sizing: border-box;
}

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

details.accordion p{
  box-sizing: border-box;
  padding: 10px 20px 20px;
}

先ほどと同じですが見た目はこちら！

メニュー

開いた時のテキストが入ります。開いた時のテキストが入ります。

そもそも開いた状態で読み込まれたいとき

デフォルトでは閉じた状態で読み込まれますが、読み込み時は開いた状態で見せたいときはdetailsにopenを付与するだけ、なんです！

<details class="accordion" open>
  <summary>メニュー</summary>
  <p>開いた時のテキストが入ります。開いた時のテキストが入ります。</p>
</details>

openを付与した見た目はこちら！

メニュー

開いた時のテキストが入ります。開いた時のテキストが入ります。

以前はjQueryで実装していましたが、clickを取得して、クラスがついているかを判断したり、さらにさらにclassを付与してdisplay:noneやdisplay:blockしたり。
もしくはjQueryでtoggle()で開閉してた！？と思いますが。

HTMLとCSSだけでできちゃうなんて、どんどん進化していきますね！
なので何かを実装するときはいちいち調べてみると最新の技術が見つけられたりしますので、いちいち調べるのって。本当だいじ。

そしてアウトプット！
何よりも忘れやすい自分のために・・・

share

人気記事