【jQuery】ボタンを押したら全画面でコンテンツを表示するボタンが二つ以上あったときの処理

全画面で表示するコンテンツが2つあったときに、どちらも開いた状態にならないようにいい感じにしたときの備忘録

やりたいこと

• ボタンを押したら全画面表示になるボタンが2つ
• 全画面表示は一つしか開かないようにしたい
  ボタンを二つ押したらどちらも開くようなことにしたくない
• 可能な限り短くコードは書きたい
• 2つ以上でも対応できるようにしたい

以上

ソースコード

htmlとcss

<style>
.hideContent{
  display: none;
}
.hideContent.active{
  display: block;
}
</style>

<!-- ボタン -->
<div class="box">
  <div id="btn1" class="btn">メニュー用ボタン</div>
  <div id="btn2" class="btn">フォーム用ボタン</div>
</div>

<!-- 全画面用のコンテンツ -->
<div id="hideContent1" class="hideContent">
  <ul class="center">
    <li>メニューが入ります</li>
    <li>メニューが入ります</li>
    <li>メニューが入ります</li>
  </ul>
</div>

<div id="hideContent2" class="hideContent">
  <div class="center">
    フォームが入ります
  </div>
</div>

ID属性は指定はしているけど使ってはいない
必要最低限のcssのみ書いてる

jQuery

<script>
jQuery(function($){
  $(function(){
    var btn = $('.btn');
    var hideContent = $('.hideContent');
    $('.btn').on('click', function(){
      var index = $(this).index();
      if($(this).hasClass('active')){
        // クリックした要素が既にactiveだった時
        $(this).removeClass('active');
        hideContent.eq(index).removeClass('active');
      }else{
        // クリックした要素がactiveじゃない時
        btn.removeClass('active');
        hideContent.removeClass('active');
        $(this).addClass('active');
        hideContent.eq(index).addClass('active');
      }
    });
  });
});
</script>

ボタンが同じ階層であれば兄弟要素を取得したりできるsiblings()を使ってもよかったんだけど階層が別々の可能性を考慮してindex()で同名のclassの順番を取得してる
その順番をもとにeq()を使って全画面の表示非表示と連動させている

クリックされた要素がactiveになってない時はすべてのボタンと全画面コンテンツからclassactiveを削除することで2つの全画面コンテンツが開かないようにしている

終わり

個人的なメモ