アコーディオンを全部閉じた状態にしたい

jQueryでアコーディオンを作ったのですが、全部を閉じた状態に出来なくて困っています。

デフォルトでは全部閉じた状態で、どれかひとつをクリックで開き、その後別のひとつをクリックして開くとさっきまで開いていたのを閉じる、という挙動にしました。
最後開いている場所をもう一度クリックすると一度閉じるのですがまた開いてしまうという現象が起きています。

JavaScript
1$(function() {
2      $(".inside").hide();   // .insideはアコーディオンの隠れている部分
3      $(".ac_head").click(function() {   // .ac_headはクリックする部分
4            $(".inside").slideUp(500);
5            $(".inside", this).slideDown(500);
6      });
7});

if文で「すでに開いている箇所をクリックしたら閉じる」というように書くのかなと思ったのですが、どのように書けば良いのか分かりません。
もしご存知の方いらっしゃいましたら、ご教示お願いいたします。

行動規範の内容に同意します

回答4件

ベストアンサー

こんな感じですかね？

javascript
1$(function() {
2  $(".inside").hide();
3  $(".ac_head").on('click',function() {
4    $(this).find(".inside").slideToggle(500)
5    $(this).siblings().find(".inside").slideUp(500);
6  });
7});

HTML
1<ul>
2<li class="ac_head">1
3<ul class="inside">
4<li>1-1</li>
5<li>1-2</li>
6<li>1-3</li>
7</ul>
8</li>
9<li class="ac_head">2
10<ul class="inside">
11<li>2-1</li>
12<li>2-2</li>
13<li>2-3</li>
14</ul>
15</li>
16<li class="ac_head">3
17<ul class="inside">
18<li>3-1</li>
19<li>3-2</li>
20<li>3-3</li>
21</ul>
22</li>
23</ul>

投稿2018/04/20 01:15

yambejp

総合スコア114784

miyabi_pudding

2018/04/20 01:41 編集

siblingsの存在忘れてました・・・。これなら一発信シンプルでいけますよね。

Dot

2018/04/20 02:05

兄弟要素選択なんてあったのかー

eggplant_bc

2018/04/20 04:13

yambejpさん、ご回答いただきありがとうございました！まだまだ勉強し始めたばかりなもので、.siblingsや.findを初めて知りました…。 yambejpさんから教えていただいたコードで解決しました。とても勉強になりました。ありがとうございます！

行動規範の内容に同意します

そりゃ、.insideのセレクタで二回同時に処理をしているんだからそうなりますよ。
それと、HTML構成も記載したほうがいいと思います。
（jQueryでのセレクタの構成をどう回答すればいいかわかりずらいので）

現状から、推測して、
Dotさんの回答を使い、下記でいかがでしょうか？

javascript
1$(function() {
2  $(".inside").hide();   // .insideはアコーディオンの隠れている部分
3  $(".ac_head").click(function() {   // .ac_headはクリックする部分
4    // クリックした対象のアコーディオン要素を格納しておく
5    var target = $(this).parent().find(".inside");
6    $(".inside").each(function(){
7      if(!$(this).is(":hidden")){
8        $(this).not(target).stop().slideUp(500);
9      }
10    });
11
12    if (target.is(":hidden")) {
13      target.stop().slideDown(500);
14    } else {
15      target.stop().slideUp(500);
16    }
17    
18  });
19});

一度、クリックした要素の.insideと、それ以外の.insideと処理を分けています。
こうすることによって、挙動を分けてわかりやすくなります。
また、stop()を実行することによって、
何度もクリックされた際の、変な挙動を抑えることができます。
（これを入れないと、連続クリックした回数分アニメーション処理が実行されてしまう）

投稿2018/04/20 00:58

編集2018/04/20 01:06

miyabi_pudding

総合スコア9528