レスポンシブでアコーディオン・タブのブレークポイント時のリセット関数について

現在、レスポンシブでWebページを作成しており、自分では解決できそうもないので質問をさせていただきます。皆様のお力をお貸しください・・・よろしくお願いいたします。

前回の質問:https://teratail.com/questions/54584

#やりたいこと

ブレークポイント時に非表示状態になった要素がリセット関数で初期状態に戻っており、選択中の要素がブレークポイントで切り替わっても選択状態であること

理想の状態は、下記：参考サイト様内のキリンビール様のURLをご参照ください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>

//リセット
function resetMenu(){
  var w = $(window).innerWidth();
  var $activeClass  = 'is-active';
    if(w <= 640){
     
 }else{
    
 }
}

$(function(){
    
  var $switchPoint = 768,
      $tab_Item = $('.tab li'),
      $accordion = $('.acr-title'),
      $accordionc = $('.acr-title p'),
      $tabContents = $('.tab-contents'),
      $activeClass  = 'is-active',
      $activeTab = $(this).find('a').attr('href');
     
 if(window.innerWidth >= $switchPoint){
 
    //最初のtabContents以外は隠す
  $(".tab-contents").hide();
  $(".tab li:first").addClass($activeClass).show();
  $(".tab-contents:first").show();
  $(".tab li").click(function(){
     $(".tab li").removeClass($activeClass);
     $(this).addClass($activeClass);
     $(".tab-contents").hide();
     $($activeTab).fadeIn();
      return false;
  });
 }else{
     
    //スマホ時の処理
    $tabContents.show();
    $('.close-tab').hide();
     $('.acr-body').append('<p id="close" class="mt-10 mb-15 btn-close btn-link"><a href="#" class="close-link">閉じる</a></p>');
     $accordion.click(function(){
     $accordion.removeClass('open_close');
     $accordionc.css("display","none");
		$(this).next().slideUp(300);
		$(this).removeClass('selected');
		if($(this).next().css("display")=="none"){
        $(this).addClass('open_close');
        $('.acr-body').slideUp(300);
        $(this).next().slideDown(300);
        $("+.acr-body p",this).fadeIn(1500);
       $('.selected').removeClass('selected');
       $(this).addClass('selected');	
		}
	});
    
    if($('.tab-contents').size() > 0){
        
      //コンテンツの数
      var tabsNum = $('.acr-title').length;
        
      //コンテンツ部分のフラグ
      var navFlag = new Array();
        for( i = 0; i < tabsNum; i++){
          navFlag[i] = true;
        };
        
    //閉じるボタンの処理
     $('.tab-contents #close').on('click',function(){
       var closeNum = ($(this).parents('.acr-title').index());
       $(this).parents('.acr-body').slideUp('300');
       $(this).parents('.acr-body').prev('.tab-contents').removeClass('current');
       navFlag[closeNum] = true;
     });
    }
  }
 });
</script>
</head>
<body>
<!-- タブメニュー（640px以下では表示しない） -->
<div class="tabs">
 <div class="tab-button-outer">
<ul class="tab only-tab">
    <li data-tab="#link1"><a href="#link1">リンク1</a></li>
    <li data-tab="#link2"><a href="#link2">リンク2</a></li>
    <li data-tab="#link3"><a href="#link3">リンク3</a></li>
</ul>
 </div>
<!-- タブbody-->
<div id="link1" class="tab-contents">
  <div class="acr-title check-btn only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
  <div class="acr-body">
    <p>アコーディオ</p>
    <p>アコーディオン</p>
    <p>アコーディオン</p>
  </div>
</div>
<!-- タブbody-->
<div id="link2" class="tab-contents">
  <div class="acr-title check-btn only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
  <div class="acr-body close-tab">
    <p>アコーディ</p>
    <p>アコーディオン</p>
    <p>アコーディオン</p>
  </div>
</div>
<!-- タブbody-->
<div id="link3" class="tab-contents">
  <div class="acr-title check-btn only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
  <div class="acr-body close-tab">
    <p>アコ</p>
    <p>ア</p>
    <p>アコーディオン</p>
  </div>
</div>
</div>
</body>
</html>

@charset "utf-8";

*{
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

li,ol,ul{
 list-style: none;
}

.tabs{
  margin: 0 auto;
  padding: 0 20px;
  max-width: 640px;
  width: 100%;
}

.tab{
  display: table;
  table-layout: fixed;
  width: 100%;
}

.tab li{
  display: table-cell;
}

.tab li a{
  display: block;
  padding: .5em;
  background-color: #eee;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  text-align: center;
}

.tab li:not(:first-child) a {
  border-left: none;
}

.tab li a:hover,
.tab .is-active a{
  border-bottom-color: transparent;
  background-color: #fff;
}

.tab-button-outer{
  display: none;
}

@media screen and (min-width: 768px){
    .tab-button-outer{
      display: block;
      position: relative;
      z-index: 2;
    }
}

.only-sp{
  padding: 10px;
  position: relative;
  cursor: pointer;
  text-align: center;
  color: #fff;
  background-color: #333;
}

.only-sp:hover{
  background-color: #eee;
}


.only-sp::after{
  content:"+";
  display: block;
  position: absolute;
  top: 2.5px;
  right: 8px;
  bottom: 0;
  width: 20px;
  height: 12px;
  font-size: 20px;
  font-size: 2rem;
  background-size: 100% auto;
  -webkit-transition: 0.3s linear; 
  -moz-transition:0.3s linear; 
  -ms-transition:0.3s linear; 
  transition: 0.3s linear;
}

@media screen and (min-width: 768px){
    .only-sp{
      display: none;
    }
}

.open_close::after{
  content:"-";
}

.tab-contents{
  padding: .5em 1em 1em;
}

@media screen and (min-width: 768px){
    .tab-contents{
      position: relative;
      top: -1px;
     border: 1px solid #ddd;
    } 
}

@media screen and (min-width: 768px){
    #close{
      display: none;
    }
}

.acr-body{
  display: block;
  padding: 10px;
  height: 110px;
}

@media screen and (min-width: 768px){
    .acr-body{
      height: 200px;
    }
}

.acr-body p{
  display: block;
  margin: 10px 0;
  border: 1px dashed #d6dddf;
}

@media screen and (min-width: 768px){
    .acr-body p{
      padding: 10px;
      border: none;
    }
}

.selected{
  background-color: #ffc44d;
}

#試したこと
上記のURLでご質問させていただいた案件につきまして、それぞれスマホ時にアコーディオン・タブレットからPC時にはタブパネルとそれぞれ単独での実行はできたのですが、
タブレットPCサイズでタブパネル内のリンクをクリックし内容が表示されるまではいいのですが、スマホサイズに幅を縮めると選択したタブパネル以外が非表示状態のアコーディオンパネルとなってしまいます。※スマホ状態のアコーディオンでもPCサイズのタブパネルになったら同じような状態になってしまいます。

前回の質問の回答中に"ブレークポイント"時に"リセット系の関数"が必要とご忠告され、リセット関数内に要素をクリック前の表示状態を入れてみましたが変化はありませんでした・・・

#参考サイト様

キリンビール様 http://www.kirin.co.jp/campaign/#in_session