【ECサイトの全ての商品ページに、アコーディオンメニューを表示させたい】 ※プログラミング超初心者で

【ECサイトの全ての商品ページに、アコーディオンメニューを表示させたい】
※プログラミング超初心者です※
おちゃのこネットというカートシステムを使い、ECサイトの作成をしています。

全ての商品ページに、アコーディオンメニューを表示させたいのですが、一つの商品ページだけにしか元のCSSデザインが正しく表示されていません。

●具体的に何が起きているか？
添付の画像の1番上の形式が正しいデザインだが、他のページにアコーディオンメニューのコードを入力すると、下の画像の様に表示されてしまう。
アコーディオンメニューの右側（＋）が表示されなく、文字のアンダーラインの幅同士が広くなってしまう。

【コード情報（HTML・JavaScript・CSS）】
https://docs.google.com/document/d/e/2PACX-1vQ2H …


因みに、各商品ページごとに、同じコードを入力しています。

恐らく、CSSの表記が全ページに対応になっていないのかも？です。
※プログラミングの初心者のため、コードはネットからコピーしてきたものを編集して利用しました。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/10/18 00:52

こんばんは

ご提示のアコーディオン（＝と呼ぶのかどうか疑問ですが）の仕組みは、CSSだけで実現できるようになっています。
ご質問の部分だけに関して言えば、javascriptは関係ありません。（無しで機能します）

＞恐らく、CSSの表記が全ページに対応になっていないのかも？
他のページがどうなっているのか不明ですけれど、基本的に同じHTML構成（タグとクラスの構成）になっていれば、同じCSSで実現が可能なはずです。
ですので、ありそうな原因として考えられるのは、
　・別のCSSで仕組みを妨げるような指定をしている。
　・HTMLの構成（クラス名も含む）が、違う構成になっている。
あたりが怪しそうです。（他にもあるとは思いますが、一番ありそうな原因）

＞因みに、各商品ページごとに、同じコードを入力しています
もしも、まったく同じCSSを適用しているのなら、HTMLを見直してみるのが宜しいかと。
一項目分の基本的な構成は以下のようになっています。
（必要な数だけ、これを繰り返せばよいはずです）

<div class="cp_actab">
＿ <input id="tab-number" type="checkbox">
＿ <label for="tab-number">メニューのタイトル</label>
＿ <div class="cp_actab-content">
　　　タイトルクリック時に表示される内容をDIV内に記す
＿ </div>
</div>

※ ここの投稿欄ではインデントが無視されるため、「 ＿ 」で記していますのでご注意ください。
※ 各項目のid及びクラス名の「tab-number」部分は、対応させておく（=同じ名称）ことが必要です。
※ また、idはHTML内で個別である必要がありますので、項目ごとにnumber部分を変えるなどして、別名にしておくことが必要です。

上記の構成やルールがおかしくなっていることはありませんか？
（想像するところ↑が正しくないのが原因ではないかと‥）

なお、ご質問には関係ありませんけれど、現在作成中であるのなら、HTML5を採用することをお勧めしておきます。

この回答へのお礼

ご回答ありがとうございましたm(_ _)m

お礼日時：2022/04/07 04:25