みなさんこんにちは!おさかなです!
今回は「【アコーディオンリスト】を同じページに「複数」設置する方法とは?」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・アコーディオンリストを設置したい方
・同じページに複数設置したい方
・HTMLを学習中の方
アコーディオンリストを「複数」設置したい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ん〜?なんか「アコーディオンリスト」を2つ設置したら、エラーになっちゃったよ💦
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
もしかしたらid名が原因かも?
一緒に解決しよう!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
うわーん💦へるぷ〜。
![](https://osakanav.com/wp-content/uploads/2021/12/hariten-top-160x90.png)
「複数」設置すると、エラーが…?!
前回こちらの記事で、WordPressブログに「アコーディオンリスト」を設置する方法を解説しました。
![](https://osakanav.com/wp-content/uploads/2021/04/wp-ac-list-160x90.jpg)
しかしこのままでは「同じページに複数設置」する場合、エラーが発生してしまいます。(なんだってー!?)
原因は?
原因は同じ「id名」が使われていることです。
このid名というのは、1つのページに1つまでしか設定することができず、重複してしまうと、エラーの原因になることがよくあります!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2020/02/20-02-24-17-20-19-097_deco-300x300.jpg)
参考サイト:侍エンジニア「HTMLのidとは?」
![](https://osakanav.com/wp-content/uploads/2021/11/kakidasi-top-160x90.gif)
対処法!
これを解決するには、2つ目以降のアコーディオンリストの「id名」が重複しないように、変更すればOKです!(シンプル)
![](https://osakanav.com/wp-content/uploads/2020/02/20-02-11-17-03-19-942_deco-300x300.jpg)
↓例えば下記のように「赤字部分」を変更しましょう。(おー!)
◎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![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
アコーディオンリストをたくさん設置しよう!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-top-160x90.png)