Wordpress JSなしで投稿記事のループをアコーディオン表示する方法 備忘録

いちばん最初に参考にした記事:
https://webdesignday.jp/inspiration/technique/css/5316/

困ったこと

チェックボックスをフラグにするのですが、input(id="")とlabel(for="")を同じにしないと、チェックボックスを消した時に動作しない・・・。foreachで回している記事に連番を付けるには・・・ あれこれ試行錯誤して、できたのがPHPのループを使ってしまうこと。

解決法

        <?php $i =1; foreach($posts as $post): $id = $i++;?>
        <input  class="acd-check" id="<?php echo$id;?>" type="checkbox">
        <label class="acd-label" for="<?php echo$id;?>">Q.<?php the_title(); ?>
        </label>
        <div class="acd-content">
        <div class="a">A.</div>
        <?php the_content(); ?>
        </div>
         <?php endforeach; endif; ?>```

いちばん最初のリンクのコードを使用して、
あとはこのように$idを++で連番にして入れていくと、無事に１から連番でIdがinput/labelと同じになるので、チェックボックスを非表示にしても問題なくアコーディオンになる。

ポイント！
echoしないと表示されないのでidに付与されません。<?php echo$id;?>と書いてくださいね！