jqueryによる複数タブの開閉

html
1<div id="switch1" class="switch">開閉スイッチ１</div>
2<div id="area1" class="close">
3コンテンツ１
4</div>
5
6<div id="switch2" class="switch">開閉スイッチ2</div>
7<div id="area2" class="close">
8コンテンツ2
9</div>
10
11<div id="switch3" class="switch">開閉スイッチ3</div>
12<div id="area3" class="close">
13コンテンツ3
14</div>

このように開閉するコンテンツが複数あるとき、
下記のような条件での実装方法がわかりません。。

開閉スイッチを押すと、セットのコンテンツが開閉する。（switchとareaは番号が同じものがセット）
あるareaが開いているときに、他のセットのスイッチを押すと、開いているareaは閉じて、スイッチを押したセットのareaが開く
あるareaが開いているときに、スイッチ以外のエリアを押すと開いているareaが閉じる
開いているareaのswitchは背景色をかえる

下記試しました。（汚いソース。。ああ恥ずかしい。。）

css
1.close {display:none;}
2.open {display:block;}
3.switch {background:#fff;}
4.switch.active {background:#ddd;}

js
1$(function() {
2  $('.active').click(function(){
3    $('#area1').removeClass("open");
4    $('#area1').addClass("close");
5    $('#area2').removeClass("open");
6    $('#area2').addClass("close");
7    $('#area3').removeClass("open");
8    $('#area3').addClass("close");
9    $(this).removeClass("active");
10  });
11});
12$(function() {
13  $('#switch1').click(function(){
14    $('#area1').removeClass("close");
15    $('#area1').addClass("open");
16    $('#area2').removeClass("open");
17    $('#area2').addClass("close");
18    $('#area3').removeClass("open");
19    $('#area3').addClass("close");
20    $('#switch1').addClass("active");
21    $('#switch2').removeClass("active");
22    $('#switch3').removeClass("active");
23  });
24});
25$(function() {
26  $('#switch2').click(function(){
27    $('#area1').removeClass("open");
28    $('#area1').addClass("close");
29    $('#area2').removeClass("close");
30    $('#area2').addClass("open");
31    $('#area3').removeClass("open");
32    $('#area3').addClass("close");
33    $('#switch1').removeClass("active");
34    $('#switch2').addClass("active");
35    $('#switch3').removeClass("active");
36  });
37});
38$(function() {
39  $('#switch3').click(function(){
40    $('#area1').removeClass("open");
41    $('#area1').addClass("close");
42    $('#area2').removeClass("open");
43    $('#area2').addClass("close");
44    $('#area3').removeClass("close");
45    $('#area3').addClass("open");
46    $('#switch1').removeClass("active");
47    $('#switch2').removeClass("active");
48    $('#switch3').addClass("active");
49  });
50});
51

ヒントだけでもよいので、教えていただけると助かります。

よろしくお願いします。

kei344

2018/04/26 15:21

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

mayeno26

2018/04/26 15:22

コメントありがとうございます。そのように書き直します。

退会済みユーザー

2018/04/26 15:23

jQuery UI を利用しない理由は何かおありですか？ http://jqueryui.com/tabs/

mayeno26

2018/04/26 16:06

jQuery UI存じ上げませんでした。ちょっと試してみます。

m.ts10806

2018/04/27 00:39 編集

一応、回答してみました。あくまで実装例なので、ヒントとして自身でも色々やってみてください。

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

回答3件

あけたエリアを閉じなくてよいのでしょうか？
またareaをidで処理するのは非効率的なのでクラスを与えてあげるとよいでしょう

javascript
1$(function(){
2  $('.switch').on('click',function(){
3    $('.switch').removeClass('active').next('.area').addClass('close');
4    $(this).addClass('active').next('.area').removeClass('close');
5  });
6});

HTML
1<div id="switch1" class="switch">開閉スイッチ1</div>
2<div id="area1" class="close area">
3コンテンツ1
4</div>
5
6<div id="switch2" class="switch">開閉スイッチ2</div>
7<div id="area2" class="close area">
8コンテンツ2
9</div>
10
11<div id="switch3" class="switch">開閉スイッチ3</div>
12<div id="area3" class="close area">
13コンテンツ3
14</div>

投稿2018/04/27 01:04

yambejp

総合スコア117719

mayeno26

2018/04/27 01:46

こちらの回答も参考にさせて頂きました。感謝感謝です。ありがとうございました。

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

ベストアンサー

クラスに対して指定すれば同じクラスを持っているもの全てに効くので、
それを利用すれば一気に解決すると思います。

「自身」はthisで取得できるので同列要素が列挙されてクラスを利用する場合は、
わざわざid指定でそれぞれclickを拾う必要はありません。

displayのnone⇔block　の切り替えならクラスの付け外しだけではなくshow(),hide()か
いっそtoggle()を使用しても良いかと。

not()を利用すれば「指定要素以外」という指定ができるので、覚えておくと結構使えます。

例えば下記のような感じです。

html
1<div id="switch1" class="switch">開閉スイッチ１</div>
2<div id="area1" class="contents">
3コンテンツ１
4</div>
5
6<div id="switch2" class="switch">開閉スイッチ2</div>
7<div id="area2" class="contents">
8コンテンツ2
9</div>
10
11<div id="switch3" class="switch">開閉スイッチ3</div>
12<div id="area3" class="contents">
13コンテンツ3
14</div>

js
1$(function() {
2    //初期は閉じておく
3    $('.contents').hide();
4    $('.switch').removeClass('active');
5    
6    $('.switch').on('click',function(){
7        $('.switch').removeClass('active'); //全て背景色offに
8        $('.contents').not($(this).next()).hide();//クリックした要素以外閉じる
9        
10        $(this).next('div.contents').toggle(); //クリックした要素の関連要素のみtoggle
11        $(this).addClass('active'); //クリックした要素の背景色
12    });
13});