みなさんこんにちは!おさかなです!
今回は「【アコーディオンリスト】を同じページに「複数」設置する方法とは?」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・アコーディオンリストを設置したい方
・同じページに複数設置したい方
・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アコーディオンリストをたくさん設置しよう!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!