質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 338

score 5

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

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

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

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

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

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

問題点は2点あります。

【1】
一つ目は、上記どおりのソースコードをwordpressにそれぞれ配置した場合
アコーディオンを開いた際の<p>タグの中身が表示されません。
元のソースをコピーペーストしたにも関わらず、この箇所のみうまく表示されませんでした。
<p>タグを外してプレーンの状態でテキストを流し込んだ所、アコーディオン内に表示されうまく行きました。
しかし、なぜこのような現象が起きているのか不思議でなりません。

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

【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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/03 21:11 編集

    ご返答いただきありがとうございます。
    大変恐縮ですが、上記だけでは理解出来ず、もう少し具体的にご教授いただくこと可能でしょうか?
    お手数ですが何卒よろしくお願い致します。

    <ul>
    <li>
    <a class="toggle">
    <p class="accordion_icon"><span></span><span></span></p>
    <h5>タイトル(クリックで開閉します)</h5>
    </a>
    <p>
               ※例えばここを<div>で閉じた場合はアコーディオンから
               外にはみ出てしまいます(imgタグを入れた場合も同様です)※
            </p>
    </li>

    キャンセル

  • 2020/02/04 09:35

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

    キャンセル

  • 2020/02/04 15:11 編集

    ご返答いただきありがとうございます。
    また、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


    これはなにが原因でこのような状態になるのかご存知であればご教示いただけますでしょうか?

    お忙しい所、何度も質問して申し訳ございませんが何卒よろしくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る