質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

10374閲覧

アコーディオンバーが開かない

begenner

総合スコア79

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/03/04 16:10

現在ECサイトを作成しています。

このサイト を参考にしましたが、アコーディオンバーを作成しましたがうまく動作しません。

チェックボックスを隠して項目をクリックしても開かない状態です。
チェックボックスを表示させてチェックすると問題なく動きます。
もしできればSassでのCSSの記述の仕方も教えていただけたら幸いです
わかる方がいらっしゃいましたら教えていただきますようお願いいたします(m_ _m)

###期待する動作
チェックボックスを表示させずに項目の表示・非表示を切り替えたい
###動作環境
OS:mac

###補足情報
できればhtmlとcss(sass)だけでアコーディオンバーが動くようにしたいです。
###該当のソースコード

html部分

html

1. 2. 3<div id="side-bar"> 4 <!--商品検索--> 5 <!--商品番号検索--> 6 <!--ジャンル検索--> 7 <!--新商品--> 8 <div id="new-item"> 9 10 <label for="new-item">新商品</label> 11 <input type="checkbox" id="new-item" class="on-off"> 12 <div class="show"> 13 <div class="genrelist">ジャンル1</div> 14 <div class="genrelist">ジャンル2</div> 15 <div class="genrelist">ジャンル3</div> 16 <div class="genrelist">ジャンル4</div> 17 </div> 18 </div> 19. 20. 21</div>

CSS部分

css

1 //サイドバー 2 #side-bar{ 3 width: 280px; 4 //background-color: #BBBBBB; 5 6 //検索ボックス用 7 .search_box{ 8 9 } 10 11 12 13 label{ 14 font-size: 20px; 15 font-style: italic; 16 line-height: 40px; 17 margin-left: 20px; 18 height: 40px; 19 width: 280px; 20 cursor: pointer; 21 display: block; 22 23 &:hover{ 24 opacity: 0.4; 25 } 26 } 27 28 input{ 29 display: none; 30 } 31 32 //中身を非表示にしておく 33 .show{ 34 height: 0; 35 padding: 0; 36 overflow: hidden; 37 opacity: 0; 38 transition: 0.8s; 39 } 40 41 .on-off:checked + .show { 42 height: auto; 43 opacity: 1; 44 } 45 46 47 48 //各ジャンルの色指定 49 #new-item{ 50 color: #F57F17; 51 //width: 280px; 52 background-color: #FDD835; 53 } 54 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

もしかして、「id="new-item"」が二つあるからではないでしょうか?

投稿2018/03/05 01:43

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問