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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

4700閲覧

アコーディオンメニューにて1番上のみ開いた状態で表示させたい

bakio

総合スコア21

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2020/03/23 09:01

内容

アコーディオンメニューを作成していて、一番上のメニューのみ開いた状態で表示させたいのですが、うまくいきません。

html

1 <div class="qa"> 2 3 <div class="cp_actab"> 4 <input id="tab-one" type="checkbox" name="tabs"> 5 <label for="tab-one">Q 開いた状態にしたいメニュー</label> 6 <div class="cp_actab-content"> 7 <p class="answer_text">A 開いた状態にしたいメニュー</p> 8 </div> 9 </div> 10 <div class="cp_actab"> 11 <input id="tab-two" type="checkbox" name="tabs"> 12 <label for="tab-two">Q 閉じた状態でいいメニュー</label> 13 <div class="cp_actab-content"> 14 <p class="answer_text">A 閉じた状態でいいメニュー</p> 15 </div></div> 16 17 </div> 18

css

1 2 3.cp_actab { 4 position: relative; 5 overflow: hidden; 6 width: 95%; 7 margin: 0 auto; 8 color: #ffffff; 9 } 10 11 .cp_actab input { 12 position: absolute; 13 z-index: -1; 14 opacity: 0; 15 } 16 17 .cp_actab label { 18 font-weight: bold; 19 line-height: 2.3rem; 20 position: relative; 21 display: block; 22 padding: 0 0 0 0.3rem; 23 cursor: pointer; 24 margin: 0 0 0.2rem 0; 25 background: #6a4c48; 26 font-size: 1.1rem; 27 } 28 29 .cp_actab .cp_actab-content { 30 overflow: hidden; 31 max-height: 0; 32 -webkit-transition: max-height 0.35s; 33 transition: max-height 0.35s; 34 color: #121d9b; 35 background: none; 36 } 37 38 .answer_text { 39 font-size: 2.1rem; 40 font-weight: bold; 41 margin: 0.1rem; 42 } 43 44 .answer_text p { 45 font-size: 2.1rem; 46 } 47 48 .cp_actab .cp_actab-content p { 49 margin: 0.6rem; 50 font-size: 1rem; 51 line-height: normal; 52 color: #2a2128; 53 } 54 55 /* :checked */ 56 .cp_actab input:checked~.cp_actab-content { 57 max-height: 30rem; 58 } 59 60 /* Icon */ 61 .cp_actab label::after { 62 line-height: 2; 63 position: absolute; 64 top: 0; 65 right: 0; 66 display: block; 67 width: 2em; 68 height: 2em; 69 -webkit-transition: all 0.35s; 70 transition: all 0.35s; 71 text-align: center; 72 } 73 74 .cp_actab input[type=checkbox]+label::after { 75 content: '+'; 76 } 77 78 .cp_actab input[type=checkbox]:checked+label::after { 79 transform: rotate(315deg); 80 } 81

## 試したこと
他サイトで掲載されてる方法をほぼ全て調べてやってみましたが、全くうまくいかずでした。
かなり初心者な質問で大変恐縮ですがよろしくお願いいたします。

備考

共有しましたソースに追加、もしくは修正などでご教示いただけますと幸いでございます。
他、追加で必要な情報などすぐ提供いたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

こういうこと?

HTML

1<input id="tab-one" type="checkbox" name="tabs" checked>

投稿2020/03/23 09:11

kei344

総合スコア69606

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

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

bakio

2020/03/23 09:15

こんな簡単に解決できるなんて思っていませんでした....kei344様迅速なご回答ありがとうございました!!!この方法は骨に刻みます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問