超簡単・タグだけでアコーディオン

折りたたみたい時、あるよね。
Q&Aとかさ。

See the Pen summryタグ by s w (@s-w-the-scripter) on CodePen.

もはやhtmlタグだけで簡単にできてしまうのね。
開いた状態で表示したい場合は、下記のようにaccordionクラスを入れるだけ。

<details class="accordion" open>

三角を消したい時は、CSSでsummarにlist-style: none;を付ける。

summary{
    list-style: none;
  }

ちなみにワードプレスのブロックにも標準で装備されている。
↓こちら

ただし、装飾は背景色と、文字の色を変えるくらい。

少し装飾

See the Pen summryタグ2 by s w (@s-w-the-scripter) on CodePen.

タブを開いたときに、ふんわりと文字が下りてくる。
開いてるタブのバーを水色に。

htmlとCSSだけで簡単にできちゃう～✨