【アコーディオンリスト】を同じページに「複数」設置する方法とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「【アコーディオンリスト】を同じページに「複数」設置する方法とは?」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・アコーディオンリストを設置したい方
・同じページに複数設置したい方
・HTMLを学習中の方

アコーディオンリストを「複数」設置したい!

おさかな
おさかな

ん〜?なんか「アコーディオンリスト」を2つ設置したら、エラーになっちゃったよ💦

ナビまる
ナビまる

もしかしたらid名が原因かも?
一緒に解決しよう!

おさかな
おさかな

うわーん💦へるぷ〜。

ブログに【天気予報】を埋め込み表示できちゃう?!【ハリテン】とは?
みなさんこんにちは!おさかなです!今回は「ハリテン」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ブログに「天気予報」を埋め込みたい方・サイトを運営している方・天気予報ウィジェットを探し...

「複数」設置すると、エラーが…?!

前回こちらの記事で、WordPressブログに「アコーディオンリスト」を設置する方法を解説しました。

【プラグインなし】WordPressで折りたたみ【アコーディオンリスト】を設置する方法を解説!
みなさんこんにちは!おさかなです!今回は「アコーディオンリストの設置方法」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・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
▼難易度:NORMAL
▼難易度:HARD
おさかな
おさかな

アコーディオンリストをたくさん設置しよう!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【HTML/CSS】コードをコピーするだけで、デザイン実装できちゃう!【Nomad Code】とは?
みなさんこんにちは!おさかなです!今回は「Nomad Code」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・HTML/CSSを学習している方・Webデザインを学んでいる方・Webサービ...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました