質問: ### アコーディオンの実装に関しまして htmlとcssとjsを使用した簡易的なアコーディオン(+−)を実装しようとしています。 元のサンプルが以下のURLにあり、それを模倣して少し作り変えたい*と考えています。 **(※)変更したい箇所**: アコーディオンを開いたら、テキストだけでなく、画像もアコーディオンの中にしまいこみ、 開いた時にテキストと画像の2カラムで表示できるようにしたい。 初心者なもので一つ一つのソースを解読しつつ作業を進めておりますが、 10時間以上思考錯誤しても結局実現したいものが何一つできず詰んでしまっております。 ### 発生している問題・エラーメッセージ 問題点は2点あります。 【1】 一つ目は、上記どおりのソースコードをwordpressにそれぞれ配置した場合 アコーディオンを開いた際のタグの中身が表示されません。 元のソースをコピーペーストしたにも関わらず、この箇所のみうまく表示されませんでした。 タグを外してプレーンの状態でテキストを流し込んだ所、アコーディオン内に表示されうまく行きました。 しかし、なぜこのような現象が起きているのか不思議でなりません。 ``` アコーディオンの文章が入ります。 ``` 【2】 以下の箇所を変更すれば、imgタグをアコーディオン内に収められると思い、実験的に書き換えてみましたが、 まったくうまくいきませんでした。 アコーディオンの構造の理解ができず困っております。 なるべく、このコードを流用して自分の理想とするアコーディオンを作りたいのですが、うまくいかず もし変更方法をご存知の方がいらっしゃれば何卒ご教示くださいませ。 また、サイト上で+−のトグル付きのアコーディオンを検索するといくつかサンプルは出てくるものの、 どれも理解が難しく、どこかわかりやすいサイトがあればご教示くださいませ。 何卒、よろしくお願い致します。 【2】 ``` /*元データ*/ .accordion > ul > li > p { display: none; text-align:left; padding:0 .8em 1.4em 1em; color:#555; line-height:1.8; } /*変更しようとしている箇所*/ /*この箇所をpからimgに置き換えることでアコーディオン内にimgを格納できると考えていましたが、 単純にdisplay:none;により非表示になるだけでアコーディオン内を納めることはできませんでした。 どこかにアコーディオンを開いた際に非表示から表示に切り替わる箇所があるように思い探したのですが そのような記述が見当たりませんでした。*/ .accordion > ul > li > img { display: none; text-align:left; padding:0 .8em 1.4em 1em; color:#555; line-height:1.8; } ```
回答: アコーディオンは階層的なHTML要素で構成すれば 半自動的にアコーディオンとして挙動します * codepen