@nt7121posted at 2021-06-17

（解決済）WPの記事を使ったアコーディオンメニューを作成したい

Q&A

解決したいこと

WPの記事タイトル(wp_title())を押すと記事内容(the_content())が表示されるアコーディオンを実装したいのですが仕様上不可能なものなのかコードなどに原因があり動かないのかがわからず困っている為どちらに当てはまるのかご教示いただけると幸いです。

発生している問題・エラー

エラーメッセージ：なし
１つ目のアコーディオンは問題なく開けるが二つ目以降のアコーディオンは押しても反応しない

該当するソースコード

                  <?php
                  $args = array(
                    'posts_per_page' => 6, // 表示する投稿数
                    'post_type' => array('requirements_post', 'posttype_2'), // 取得する投稿タイプのスラッグ
                    'orderby' => 'date', //日付で並び替え
                    'order' => 'DESC' // 降順 or 昇順
                  );
                  $my_posts = get_posts($args);
                  ?>
                  <?php foreach ($my_posts as $post) : setup_postdata($post); ?>

                    <input id="acd-check1" class="acd-check" type="checkbox">
                    <label class="acd-label" for="acd-check1"><?php echo get_the_title($post->ID); ?></label>
                    <div class="acd-content">
                        <p><?php the_content(); ?></p>
                    </div>
                    <?php endforeach; ?>
                    <?php wp_reset_postdata(); ?>

自分で試したこと

・foreach アコーディオンのワードでひたすら検索

1Answer

@shipwebdotjp posted at 2021-06-30

labelのfor属性ととinputのid属性は、labelをクリックするとそのfor属性と同じidを持つinput type=checkboxにチェックが入る仕組みとなっています。

示していただいたコードですとforeachの中で全てのidが「acd-check1」固定になってしまっています。
つまり、２番目も３番目もすべて1番目とおなじfor属性を持つため、２，３番目をクリックしても１番目のチェックボックスを操作してしまうことになります。

これを防ぐには、それぞれのアコーディオンのlabelのforとinputのidに個別のIDを付与する必要があります。

<input id="acd-check<?php echo $post->ID; ?>" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check<?php echo $post->ID; ?>"><?php echo get_the_title($post->ID); ?></label>

ここでは、post_idをidとforにそれぞれ付与して個別の値にしています。
ご参考になれば幸いです。

1Like

Comments

@nt7121
Questioner
ありがとうございます！試してみたら解決することができました！

Are you sure you want to delete the question?