クリックで表示、別ボタンクリックで現在表示されているものを非表示に

Question

javaScriptもしくはjQueryで実装したいです。
クリックで表示非表示するボタンを作りたいのですが・・・

複数のボタンが並んでいて、
一つのボタン（ボタンAとします）をクリックして中身を表示させた時、
別のボタン（ボタンBとします）をクリックした際に、
現在表示されているボタンAの中身を非表示にしたいです。
ボタンAをクリックして表示、もう一度クリックして非表示・・・
というやり方は調べて分かったのですが、
ほかのボタンをクリックした際にも非表示にできますか？

説明が下手でごめんなさい。
よろしくお願いします。

<div class="button">ボタンA</div>
<div class="content">内容</div>
<div class="button">ボタンB</div>
<div class="content">内容</div>
<div class="button">ボタンC</div>
<div class="content">内容</div>

$(function () {
　　$(".content").hide();
    $(".button").click(function () {
        $(this).next().slideToggle().siblings(".content");
    });
});

Answer 1

$(function () {
　　$(".content").hide();
    $(".button").click(function () {
        $(".content").slideUp(); // 他を閉じる
        $(this).next().slideToggle().siblings(".content");
    });
});
```**動くサンプル：**[https://jsfiddle.net/5f1czkh0/](https://jsfiddle.net/5f1czkh0/)

Comments

[m-i]

回答ありがとうございます。
なるほど・・・！という感じです。
わからないことが解決できました！
どうもありがとうございました。

[m-i]

一つお聞きしたいのですが、上記コードの場合
一度クリックしたボタンをもう一度クリックすると
閉じて開く、という動作をします。
これを閉じるばかりにする方法はありますか？

[kei344]

$(this).next() が開いているかどうか判定すればよいです。

[m-i]

よくわからないので、コードを書いていただけますか？

[m.ts10806]

そこで私が提示した「表示か非表示かを判定する」が活きてくるのですけど。。。
やり方は1つではないので色々組み合わせて試行錯誤してください。
まんまコピペコードをもらっても「わかったつもり」になって後で必ず公開します。

Answer 2

.contentをループで回し、表示か非表示かを判定して表示だったら非表示にすれば良いのではないでしょうか。

ヒントサンプルコード：

.contentを非表示

$(function () {
    $(".button").on("click",function () {
        $(this).next().slideToggle().siblings(".content");
        何番目のボタンが押されたかを取得してその番号を引数にcontentを閉じる用のユーザ関数に飛ばす
    });
}); 

.contentを閉じる用のユーザ関数　引数：何番目のボタンが押されたか
    .contentをループ
        自分の番号以外 
           $(this).hide();

ループさせなくてもnotとか使えば「この番号以外」という指定は1行で可能ですね。
そこは調べてやってみてください。たぶんループでやるより高速です。

Comments

[m-i]

回答ありがとうございます。
独学でまだまだ始めたばかりなもので、
もしお時間があればコードを書いていただければ大変助かります。
どうぞよろしくお願いします。

[m.ts10806]

回答に参考記事へのリンクを含めましたがそちらは試して見られましたか？
独学であればそのままのコードをもらうより色々組み合わせて色々試してみるのが一番です。

[m-i]

ごめんなさい。技術を習得したいと思いつつ、甘えてしまいました。
そして、・・・わかりません。
数時間悩みましたが解決できませんでした。
教えて頂けますか？
$(function(){
$(".content").each(function(){
$(this).hide();
$(".button").click(function(){
if ($(this).next().css('display') == 'block') {
$(this).next().hide();
} else {
$(this).next().show();
}
});
});
});

[m.ts10806]

eachはclickイベントの中で書かないとおそらく想定通りには動かないかと。
表示非表示の切り替えは.toggle()使ったらもう少し簡単かもしれません。
ひとまず.toggle()も試してもらうとして、すぐにコードが書ける環境にいないので、少々お待ちください。

[m-i]

お忙しい中ありがとうございます。
$(function(){
$(".content").hide();
$(".button").click(function(){
$(".content").each(function(){
$(".content").toggle();
});
});
});
試す内容はこれで正しいでしょうか？
上記のコードだと一つのボタンをクリックするとその他すべての内容が表示されます。
何かが足りないのでしょうか？
お時間があるときで大丈夫です。
回答お待ちしています。
どうぞよろしくお願いします。

[m-i]

別の方から回答を頂きましたが、
eachを使った方法も
もしご教示頂けるのなら嬉しいです。

[m.ts10806]

元のクリックで直近の子を切り替える処理も入れたらうまくいきそうには思います。
eachで回すならthisの方が良いですね。
ただ、.contentなどクラス直指定で.toggleするならeachはたぶん不要です。

[m-i]

ヒントをありがとうございます。
ヒントの内容は下記コードで正しいのでしょうか？
それとも他のことをおっしゃっているのでしょうか？
$(function () {
$(".button").on("click",function () {
$(this).next().slideToggle().siblings(".content");
var index = $('.button').index(this);
function close(index){
$('.content').each(function(){
if ($('.content').css('display') == 'block') {
$(this).hide();
}
});
}
});
});
何かが間違っているようですが、
合っている箇所はありますか？
CSSは下記で合っていますでしょうか？
.content {
display: none;
}

[m.ts10806]

編集履歴を見て答え合わせしてみてください。
その組み方だとおかしいですけどね。関数の定義の仕方と呼び出し方、きちんとタイミングなど含めて勉強し直した方が良さそうです

[m.ts10806]

コメントではマークダウン使えないのでコメントへのコード提示はあまりしない方がいいです。
基本は質問本文に追記ですね。

[m-i]

どうもありがとうございました。お二人に教えて頂いたことをよく考えて、ようやく今日正しく動くようになりました。

Answer 3

.content {
display: none;
}

$(function () {
    $(".button").click(function () {
        $(".content").slideUp(); 
      if ($(this).next().css('display') == 'block') {
    　　　　$(this).next().slideUp();
　　　 } else {
   　　　　$(this).next().slideDown();
      }
    });
});

遅くなりましたが、お二人のおかげでようやく実装できました。
勉強させていただきました。
どうもありがとうございました。