アコーディオン(html/css/javascript)の実装に関しまして

アコーディオンの実装に関しまして

htmlとcssとjsを使用した簡易的なアコーディオン(+−)を実装しようとしています。
元のサンプルが以下のURLにあり、それを模倣して少し作り変えたい*と考えています。

https://www.cloudot.co.jp/2908/#html

(※)変更したい箇所：
アコーディオンを開いたら、テキストだけでなく、画像もアコーディオンの中にしまいこみ、
開いた時にテキストと画像の2カラムで表示できるようにしたい。

初心者なもので一つ一つのソースを解読しつつ作業を進めておりますが、
10時間以上思考錯誤しても結局実現したいものが何一つできず詰んでしまっております。

発生している問題・エラーメッセージ

問題点は２点あります。

【1】
一つ目は、上記どおりのソースコードをwordpressにそれぞれ配置した場合
アコーディオンを開いた際の<p>タグの中身が表示されません。
元のソースをコピーペーストしたにも関わらず、この箇所のみうまく表示されませんでした。

<p>タグを外してプレーンの状態でテキストを流し込んだ所、アコーディオン内に表示されうまく行きました。しかし、なぜこのような現象が起きているのか不思議でなりません。

html
1<p>アコーディオンの文章が入ります。</p>

【2】
以下の箇所を変更すれば、imgタグをアコーディオン内に収められると思い、実験的に書き換えてみましたが、
まったくうまくいきませんでした。
アコーディオンの構造の理解ができず困っております。
なるべく、このコードを流用して自分の理想とするアコーディオンを作りたいのですが、うまくいかず
もし変更方法をご存知の方がいらっしゃれば何卒ご教示くださいませ。

また、サイト上で+−のトグル付きのアコーディオンを検索するといくつかサンプルは出てくるものの、
どれも理解が難しく、どこかわかりやすいサイトがあればご教示くださいませ。

何卒、よろしくお願い致します。

【2】

css
1/*元データ*/
2.accordion > ul > li > p {
3	display: none;
4	text-align:left;
5	padding:0 .8em 1.4em 1em;
6	color:#555;
7	line-height:1.8;
8}
9
10/*変更しようとしている箇所*/
11/*この箇所をpからimgに置き換えることでアコーディオン内にimgを格納できると考えていましたが、
12単純にdisplay:none;により非表示になるだけでアコーディオン内を納めることはできませんでした。
13どこかにアコーディオンを開いた際に非表示から表示に切り替わる箇所があるように思い探したのですが
14そのような記述が見当たりませんでした。*/
15
16.accordion > ul > li > img {
17	display: none;
18	text-align:left;
19	padding:0 .8em 1.4em 1em;
20	color:#555;
21	line-height:1.8;
22}

行動規範の内容に同意します

回答1件

アコーディオンは階層的なHTML要素で構成すれば
半自動的にアコーディオンとして挙動します

codepen

投稿2020/02/03 08:21

編集2020/02/04 00:34

yambejp

総合スコア114839

UUTUM

2020/02/03 12:11 編集

ご返答いただきありがとうございます。大変恐縮ですが、上記だけでは理解出来ず、もう少し具体的にご教授いただくこと可能でしょうか？お手数ですが何卒よろしくお願い致します。 <ul> <li> <a class="toggle"> <p class="accordion_icon"><span></span><span></span></p> <h5>タイトル（クリックで開閉します）</h5> </a> <p> 　　　　　　　　　　　※例えばここを<div>で閉じた場合はアコーディオンから　　　　　　　　　　　外にはみ出てしまいます(imgタグを入れた場合も同様です)※ 　　　　　　　　</p> </li>

yambejp

2020/02/04 00:35

階層がきちんとできてないですね。回答にサンプルつけておきました

UUTUM

2020/02/04 06:22 編集

ご返答いただきありがとうございます。また、codepenお送りいただきありがとうございます。やりたいこと、不明点再度まとめてみましたのでご確認いただけますでしょうか？ ■サイト（サンプル）そのまま https://codepen.io/UUTUM/pen/VwLZLRZ ※JS(Jquery)はなるべくサンプルそのままのコードで製作を進めたいと考えております。　トグルの回転のみを記述してあり、とてもシンプルなものなので（JSの知見がないです） ■いただいたhtmlのサンプルをはめこんだもの https://codepen.io/UUTUM/pen/dyobYMo ※(1)codepen上では、+−が逆になりましたがアコーディオン内に格納できていることを確認しました。　前述した通り、JSの知見が全くないのでこれを逆転する方法ご存知であればご教示いただけますでしょうか？ ※(2)codepenでは確かに格納出来ているんですが、wordpress上でこのhtml/css/jsを試してみるとなぜかまたアコーディオンの外に出てしまいます。 ■wordpressでのアコーディオン（開閉どちらにしてもアコーディオンの外に要素が出てしまう問題） https://imgur.com/a/NrB89jm これはなにが原因でこのような状態になるのかご存知であればご教示いただけますでしょうか？お忙しい所、何度も質問して申し訳ございませんが何卒よろしくお願い致します。

行動規範の内容に同意します