レスポンシブでスマホ時はアコーディオンで、タブレットからはタブメニューで使い分けたい

###タブメニューとアコーディオンをPC画面とSP画面で切り替えたい

現在、レスポンシブでWebページを作成しており、自分では解決できそうもないので質問をさせていただきます。
PC画面ではタブメニューで表示され、SP画面ではアコーディオンで表示するように、jQuaryで作成したいのですが、うまくいきません。PC画面用のタブメニューはググって何とか実装できました。SP画面ではアコーディオンを加えるとうまくいきません。
JQueryプラグインで紹介されている、
Easy Responsive Tabs to Accordionを試してみましたが、導入が上手くいきませんでした。プラグイン無しで実装したいと思っています。

JQueryの書き方を中心に、教えて頂きたいです。
よろしくお願いいたします。

<section class="tab-manu">
    <div class="tab-main">
       <ul>
          <li><a href="#tab1" class="current">リスト１</a></li>
          <li><a href="#tab2" class="">リスト２</a></li>
          <li><a href="#tab3" class="">リスト３</a></li>
       </ul>
    </div>
       <div id="contents">
            <div id="tab1">
                <dl>
                <dt></dt>
                <dd></dd>
                </dl>
            </div>
            <div id="tab2">
              <dl>
                <dt></dt>
                <dd></dd>
                </dl>
            </div>
            <div id="tab3">
              <dl>
                <dt></dt>
                <dd></dd>
              </dl>
            </div>
      </div>
   </section>
```
```ここに言語を入力
.tab-main{
  width: 80%;
  margin:0 auto;
  padding-top:50px;

}

section.tab-manu{
  background: rgb(240,237,229);
}

 .tab-manu ul li {
    float: left;
    list-style-type: none;
    width: 33.3%;
}
 
.tab-manu ul li a {
    font-size: 1em;
    font-weight: bold;
    color: rgb(123,123,123);
    text-decoration: none;
    display: block;
    padding: 5%;
    text-align: center;
    width: 100%;
    background: rgb(240,237,229);
    
    border-bottom: none;
}

 
.tab-manu ul li a.current {
    background: white;
    color: rgb(123,123,123);
    border-top:2px solid rgb(0,0,85);
}
 
#contents{
    clear:both;
}
 
#contents div {
    padding-left:10%;
    background: white;
    border-top: none;
}

#tab1 dl ,#tab2 dl, #tab3 dl{
padding: 10px 0;
}

#tab1 dl:first-child ,#tab2 dl:first-child, #tab3 dl:first-child{
padding-top:20px;

}

#tab1 dt ,#tab2 dt,#tab3 dt{
padding-bottom: 5px;
display: inline-block;
}

#tab1 dd ,#tab2 dd,#tab3 dd{
padding-bottom: 5px;
display: inline-block;
}

#tab1 dt a,#tab2 dt a,#tab3 dt a{
  background-color:rgb(225,125,125);
  color:#fff;
  margin:0 20px;
 padding:5px 15px;
  text-decoration:none;
} 

#tab1 dd a,#tab2 dd a,#tab3 dd a{
  font-size: 1.6rem;
} 
```
```ここに言語を入力
$(function(){
    $('#contents div[id != "tab1"]').hide();
     
    // タブをクリックすると
    $("a").click(function(){
        // 一度全てのコンテンツを非表示にする
        $("#contents div").hide();
 
        // 次に選択されたコンテンツを再表示する
        $($(this).attr("href")).show();
         
        // 現在のcurrentクラスを削除
        $(".current").removeClass("current");
         
        // 選択されたタブ（自分自身）にcurrentクラスを追加
        $(this).addClass("current");

        return false;
    });
 
});
```





### 試したこと

・同じ内容をもう１セット作り、SP版用にしようかと思いましたが、コードが長くなり、メンテナンスが悪いのでやめました。
・<div class="tab-main">をdisplay:none;で消して、<div id="contents">の上にアコーディオン用のリストを追加したのですが、上手くいきませんでした。

### 補足情報（参考にしたサイト様）

aiship様　https://www.aiship.jp/knowhow/archives/28160