色彩を教える人になるための講座「色彩講師養成講座」の魅力とは>>

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

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

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

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


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

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

「【ECサイトの全ての商品ページに、アコー」の質問画像
gooドクター

A 回答 (1件)

こんばんは



ご提示のアコーディオン(=と呼ぶのかどうか疑問ですが)の仕組みは、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を採用することをお勧めしておきます。
    • good
    • 1

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング