WordPress6.3でも実装されたdettailsタグ。
これはdetailsのSummaryタグ。
detailsのここが中身。
↑こんな感じで開閉がCSSやJSを使わずに簡単に実装できる。
しかもアクセシビリティ面も配慮されているのがありがたいところ。
ただ、アニメーションをつけようとすると途端に難易度が上がっちゃう。
いろいろ調べてたどり着いた内容を残しときます。
CSSだけで実装
いちおうCSSだけでアニメーションをつけることは可能。以下は参考コード。
※こちらの記事を参考に作成しました
属性「open」が付いたときに、animationを使って微妙に位置をずらす+フェードインを使って動きを付けてる。
JSを使わない実装をする場合はこの方法が現状の最適解かな。
ただ、閉じる際にアニメーションが効かない上に、高確率でアニメーションが効かない…。
もう少ししっかり動きをつけたい…。
結論をいうと、、JavaScriptと併用しないとスムーズなアニメーションは実装は無理っぽかった。
ぐぬぬJavaScriptでの実装
開閉にJSでアニメーションを付ける上で大事にしたいことは、
キーボード操作やサイト内単語検索の際にちゃんと開閉できるようにしたい = アクセシビリティに悪影響を及ぼさないようにしたい
ということ。
ICS Mediaさんとryoさんの記事がとっっっっても参考になりました。
ところが、
https://ics.media/entry/220901/<details>要素からopen属性が取り除かれると中身は一瞬で非表示になってしまいます。これではいくらアニメーションさせても見えません（display: noneのようなイメージ）。そこで、アニメーションを表示させるため<summary>要素のクリックイベントにpreventDefault()メソッドを追加してデフォルトの挙動を無効化します。
ぐぬぬ…なるほど、open属性の検知だけではうまくアニメーションをつけられないん😢preventDefaultを使って通常の動作をキャンセル→クラスで開閉処理、が現状の最適解みたい。
ryoさんの実装例Dを参考に作成したものを作ってみた。
この方法だとサイト内単語検索でもしっかり表示され、detailsの良さを残しつつアニメーションがつけられました！
https://wemo.tech/4066#acc-demo-d
<details>のopenが切り替わる時、'toggle'イベントというものが発火されるので、そちらを活用することで問題を解消することができました！！
toggleイベント検知でサイト内単語検索にも対応してるんですね！すごい！！
すごいたいへん…
…とはいえJSを使うとなると「簡単に開閉が実装できる」というわけにはいかなくなるので、導入するには勇気が必要になるなぁ…
今後に期待！！！