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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

18651閲覧

アコーディオンを閉じたまま初期表示するには…

Nyoki

総合スコア10

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/11/18 13:11

編集2016/08/09 10:10

アコーディオンについて質問です。
ここの方のjqueryを使わせて頂いております。
http://lab.sonicmoov.com/markup/jquery-accordion/

位置を調節するためにいろいろ数値をいじったため、
初期表示でアコーディオンが開いたままで表示され悩んでおります。
手っ取り早くこの記述を入れれば、初期表示で閉まったまま表示されますよ、
という記述などはないものでしょうか?

cssのposition部分であったり90の数値であったりを書き換えています。
JavaScriptは書き方が全くわからないため、至らない質問ですみません。イメージ説明

90、-90のところを逆に記載(>矢印の向きが逆だったため)、top: 50%; right: 10px;の数値を場所を移動させたかったためposition: relative;を他で指定し、ここを書き換えました。

CSS

1.menu:after { 2 position: absolute; 3 top: 50%; 4 right: 10px; 5 margin-top: -14px; 6 content: '>'; 7 font-size: 14px; 8 font-weight: bold; 9 -moz-transform: rotate(90deg); 10 -ms-transform: rotate(90deg); 11 -webkit-transform: rotate(90deg); 12 transform: rotate(90deg); 13 -moz-transition: all, 0.25s, linear; 14 -o-transition: all, 0.25s, linear; 15 -webkit-transition: all, 0.25s, linear; 16 transition: all, 0.25s, linear; 17} 18 19.menu.active:after { 20 -moz-transform: translate(0, 50%); 21 -ms-transform: translate(0, 50%); 22 -webkit-transform: translate(0, 50%); 23 transform: translate(0, 50%); 24 -moz-transform: rotate(-90deg); 25 -ms-transform: rotate(-90deg); 26 -webkit-transform: rotate(-90deg); 27 transform: rotate(-90deg); 28}

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

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

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

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

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

blackonyx

2015/11/18 13:23

いじったCSSも掲載ください。その方が確実です。 特に、この方式はCSSが肝のようです。 jQueryで、クラスを変更して適用されるスタイルを切り替えているだけのようですね。
guest

回答1

0

ベストアンサー

おそらくですが、質問者様のCSSに以下の部分が抜けていると思われます。

css

1.child { 2 display: none; 3}

参考にされているサイトの解説を先頭から順に見ていて気が付きました。
ご確認あれ。

投稿2015/11/18 14:51

blackonyx

総合スコア354

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

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

Nyoki

2015/11/19 11:09

今日その記述を入れ、問題解決しました! ドンピシャでした、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問