私のサイトなどでメニューのようなものをクリックしたら直下にサブメニューや詳細情報が開くようにするのに、ネット検索で見つけた「checkbox」と「label」を組み合わせてCSSで制御する方法を採用していたのだけど、そんなことをしなくてもhtmlの「details」を使えば簡単に実現するらしい。知らなかった。
: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは 要素を使用して提供する必要があります。
developer.mozilla.org
Cocoonの「アコーディオン（トグル）」は私と同じでCSSで制御する方法らしい。
トグルボックスを「複製」した場合の挙動
表題、トグルボックスを「複製」した場合に、複製されたトグルボックスの中身を編集しようと複製されたトグルボックスの「+」をクリックしても、複製前のトグルボックスが開閉してしまい、複製後のトグルボックスは開かないので中身の編集ができない。 事実...
wp-cocoon.com
それに対して、プラグイン「CoBlocks」のアコーディオンは「details」を使う方法らしい。
CoBlocks – ページビルダー Gutenburg ブロック
CoBlocks は Gutenberg のための WordPress 用のページビルダーブロックで、行と列を含めた10個以上の新しいブロックで、真のページビルダー体験を提供します。
ja.wordpress.org
前の記事で、ブロックをコピーしても不具合が起こらなかったのは、それが理由だと思う。
コメント