選択式のアコーディオンメニューを実装したい

Question

前提・実現したいこと

web製作でアコーディオンメニューを作っています。

選択してください

はい　いいえ

AAA

BBB

はいを押すとAAA、いいえでBBBがアコーディオンで表示させるようにしたいです

ただこのスクリプトだと .yes .noを選択できないので困っています

該当のソースコード

<div class="modal_inner">

    <p class="modal_inner_txt">選択してください</p>

    <div class="modal_inner_flex">
        <p class="modal_inner_radius yes">はい</p>
        <section>
            <div class="text">
                はいを選択した時の文章
            </div>
        </section>
        <p class="modal_inner_radius">いいえ</p>
        <section>
            <div class="text">
                いいえを選択した時の文章
            </div>
        </section>
    </div>

</div>

  .modal_inner_flex {
        display: flex;
    }
    
    .modal_inner_radius {
        margin: 10px;
    }
    
    .text {
        display: none;
    }

$(function() {
    // 親メニュー処理
    $('.modal_inner_flex').click(function() {
        // メニュー表示/非表示
        $(this).next('section').slideToggle('fast');
    });

    // 子メニュー処理
    $('.yes .no').click(function(e) {
        // メニュー表示/非表示
        $(this).children('.text').slideToggle('fast');
        e.stopPropagation();
    });
});

Comments

[kei344]

提示するコードを間違っていませんか？

[otyatya_no_tya]

修正しました
参考サイトは↓です
http://chihuahua.ongaeshi.biz/ac-menu/

[kuma_kuma_]

> 修正しました
「はい、いいえ」の中身の指定がありませんが...
後CSSの追記もお願いします

[kuma_kuma_]

確認しましたが、
実装方法が間違っているように見受けられます。(HTML記載ミス)

基本形（2階層）
基本形（3階層）
開いているメニューと閉じているメニューが混在

元にされたURLでは3タイプ紹介がありました
その中のどのタイプを使いたいのですか？

[otyatya_no_tya]

なんどもすみません。よくみたら参考サイトが違っていました。解決済みですがやりたいことは↓です。
コピペして動かしてみましたがスライドなど動きがなされなかったので質問させていただきました。
https://teratail.com/questions/130210?link=qa_related_pc

選択式ではいを押すとすぐ下に画面いっぱいにAAAが表示され、またいいえも同じ挙動にしたいです

[kuma_kuma_]

>　参考サイトが違っていました
すみませんが再度提示していただいたURLの質問にある参考にしたサイトのページがありません。
その為回答内容も把握できない状態です。
なぜこの質問のサイトを参考しようと思われたのですか？

[otyatya_no_tya]

https://teratail.com/questions/130210

仕事で実装しなければいけないんですが、その実装がうまくいかないので似ている質問を参考にしようと思ったためです。

Answer 1

こんばんは。

以下のようにするとどうでしょうか。

        <p class="modal_inner_radius no">いいえ</p><!-- no を忘れています -->

    $('.yes, .no').click(function(e) { // カンマを忘れています
        // メニュー表示/非表示
        $(this).next().children('.text').slideToggle('fast'); // .next() を忘れています