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

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

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

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

Q&A

解決済

1回答

391閲覧

jqueryを使って1つを開くと他が閉じるアコーディオンメニューを作りたい

spr_tm

総合スコア16

jQuery

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

0グッド

0クリップ

投稿2019/04/10 10:05

該当のソースコード

<div class="contents12"> <div class="background-thinpink"> <div class="btn"> <img src="./img/flight.png" /> <h3 class="text-left">事前課題の提出</h3> </div> <div class="hidden"><!--隠す場所--> <p>出発前の1ヶ月前に事前課題を送ります。</p> </div> </div> <div class="background-thinpink"> <div class="btn"> <img src="./img/flight.png" /> <h3 class="text-left">現地に渡航</h3> </div> <div class="hidden"> <p> 到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。 美味しいタイ料理などもご紹介します。 </p> </div> </div> </div>

jQuery

1 2$(function () { 3 $('.hidden').hide(); 4 $(".btn").click(function () { 5 $(this).next('.hidden').slideToggle('slow'); 6 $(this).toggleClass('active'); 7 }) 8 9 10}) 11

css

1.btn::after{ 2 content:'▼'; 3 float:right; 4 font-size:20px; 5 margin-top:8px; 6} 7 8.active::after { 9 content: '▲'; 10 float: right; 11 font-size: 20px; 12 margin-top: 8px; 13} 14 15

自分なりに調べてみたのですがどうしても実装できなかったです。
調べたサイトではsiblingsを使ったりしていたのですがHTMLの構造上それも使えないように思えました。
1つずつ開くことはできるのですが、「1つひらくと他が閉じる」、が実装できません。
初歩的な質問ですがご教授いただけるとありがたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascript

1<style> 2.btn:not(.active)::after{ 3 content:'▼'; 4 float:right; 5 font-size:20px; 6 margin-top:8px; 7} 8 9.btn.active::after { 10 content: '▲'; 11 float: right; 12 font-size: 20px; 13 margin-top: 8px; 14} 15</style> 16<script> 17$(function(){ 18 $('.btn').on('click',function(){ 19 $(this).toggleClass('active').next('.content').slideToggle(); 20 $('.btn').not(this).removeClass('active').next('.content').slideUp(); 21 }); 22}); 23</script> 24 25<div class="contents12"> 26 <div class="background-thinpink"> 27 <div class="btn"> 28 <img src="./img/flight.png" /> 29 <h3 class="text-left">事前課題の提出</h3> 30 </div> 31 <div class="content" style="display:none"><!--隠す場所--> 32 出発前の1ヶ月前に事前課題を送ります。 33 </div> 34 </div> 35 <div class="background-thinpink"> 36 <div class="btn"> 37 <img src="./img/flight.png" /> 38 <h3 class="text-left">現地に渡航</h3> 39 </div> 40 <div class="content" style="display:none"> 41 到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。 42 美味しいタイ料理などもご紹介します。 43 </div> 44 </div> 45 <div class="background-thinpink"> 46 <div class="btn"> 47 <img src="./img/flight.png" /> 48 <h3 class="text-left">test</h3> 49 </div> 50 <div class="content" style="display:none"> 51 testtesttesttesttesttesttesttesttesttesttesttest 52 testtesttesttesttesttesttesttesttesttesttesttest 53 testtesttesttesttesttesttesttesttesttesttesttest 54 </div> 55 </div> 56 <div class="background-thinpink"> 57 <div class="btn"> 58 <img src="./img/flight.png" /> 59 <h3 class="text-left">test</h3> 60 </div> 61 <div class="content" style="display:none"> 62 testtesttesttesttesttesttesttesttesttesttesttest 63 testtesttesttesttesttesttesttesttesttesttesttest 64 testtesttesttesttesttesttesttesttesttesttesttest 65 </div> 66 </div> 67</div> 68

※content内にpタグを入れると微妙にずれるのではずしました

投稿2019/04/10 10:40

yambejp

総合スコア114863

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

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

spr_tm

2019/04/10 11:13 編集

迅速かつ的確に答えを提示してくださり大変助かりました。 cssの:not() jqueryの.not() 今まで知らなかったのですが大変便利ですね。 ifを使って場合分けして試行錯誤していた自分があほらしくなってきます。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問