みなさんこんにちは！おさかなです！
今回は「【アコーディオンリスト】を同じページに「複数」設置する方法とは？」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・アコーディオンリストを設置したい方
・同じページに複数設置したい方
・HTMLを学習中の方
アコーディオンリストを「複数」設置したい！
ん〜？なんか「アコーディオンリスト」を2つ設置したら、エラーになっちゃったよ💦
もしかしたらid名が原因かも？
一緒に解決しよう！
うわーん💦へるぷ〜。
「複数」設置すると、エラーが…？！
前回こちらの記事で、WordPressブログに「アコーディオンリスト」を設置する方法を解説しました。
しかしこのままでは「同じページに複数設置」する場合、エラーが発生してしまいます。(なんだってー！？)
原因は？
原因は同じ「id名」が使われていることです。
このid名というのは、1つのページに1つまでしか設定することができず、重複してしまうと、エラーの原因になることがよくあります！(ふむふむ…。)
参考サイト：侍エンジニア「HTMLのidとは？」
対処法！
これを解決するには、2つ目以降のアコーディオンリストの「id名」が重複しないように、変更すればOKです！(シンプル)
↓例えば下記のように「赤字部分」を変更しましょう。(おー！)
◎1つ目のリスト
<!– 表示部分 –>
<span onclick=”obj=document.getElementById(‘open‘).style; obj.display=
(obj.display==’none’)?’block’:’none’;”>
<a style=”cursor:pointer;”>▼ここに表示させたい文章を入力！</a>
</span>
<ul>
<!– 折り畳まれる部分 –>
<span id=”open” style=”display: none; clear: both;”>
<p>ここに展開後に表示される文章を入力！</p>
</span>
</ul>
◎2つ目のリスト
<!– 表示部分 –>
<span onclick=”obj=document.getElementById(‘open-a‘).style; obj.display=
(obj.display==’none’)?’block’:’none’;”>
<a style=”cursor:pointer;”>▼ここに表示させたい文章を入力！</a>
</span>
<ul>
<!– 折り畳まれる部分 –>
<span id=”open-a” style=”display: none; clear: both;”>
<p>ここに展開後に表示される文章を入力！</p>
</span>
</ul>
◎3つ目のリスト
<!– 表示部分 –>
<span onclick=”obj=document.getElementById(‘open-b‘).style; obj.display=
(obj.display==’none’)?’block’:’none’;”>
<a style=”cursor:pointer;”>▼ここに表示させたい文章を入力！</a>
</span>
<ul>
<!– 折り畳まれる部分 –>
<span id=”open-b” style=”display: none; clear: both;”>
<p>ここに展開後に表示される文章を入力！</p>
</span>
</ul>
…etc
ちなみに「id名」の付け方にも、少しルールがあるので、詳しくは「解説サイト」をご参照ください！
↓実際に作成したものがこちら
▼難易度：EASYアコーディオンリストをたくさん設置しよう！
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
