JQueryを使ったタブ機能で2回目以降に表示がされない

Question

JQueryのタブ機能を調べながら作ってみたのですが、動作がうまくいかず詰まってしまい投稿させて頂きました。

バグの内容

（タグの実装画面を初めて読み込んだ時は、動作に異常は無いです。）
①”タグ実装画面での更新” や ②”別の画面から画面遷移した場合”（タグ実装画面 → 別ページの画面 → タグ実装画面に戻った場合の動きです）
上記の場合にタブの内容が非表示になってしまいます

※GIF内容：途中でリロードした場合に”タブ１”が表示されない

実現したいこと

クリック以外の場合に”タブ１”の内容を初期表示にしたいです。

今回のバグに関係ありそうなコード

▼index.html.rb

<%= javascript_pack_tag 'tournament/held_list', 'data-turbolinks-track': 'reload' %>

一部省略

<div class="held_tabs">
  <div class="tab-buttons">
    <span class="in_held_tab">タブ１</span>
    <span class="before_held">タブ２</span>
    <span class="after_held">タブ３</span>
    <div id="display_mark" class="in_held_tab"></div>
  </div>
  <div class="tab-content mt-1">
    <div class="in_held_tab">
    タブ１
    </div>
    <div class="before_held">
    タブ２
    </div>
    <div class="after_held">
    タブ３
    </div>
  </div>
</div>

Jsのコード

※処理内容に間違いあればご指摘ください。

// ページ読み込み時にjavascriptを実行
$(document).ready(function () {
  // divのtab-contentクラスを非表示
  $('.tab-content>div').hide();
  // tab-content要素の中で最初の要素を取り出しスライドダウンで項目を表示
  $('.tab-content>div').first().slideDown();

  // tab-buttonsクラスの spanがクリックされたら下記を実行
  $('.tab-buttons span').click(function () {
    // this=クリックされた要素（出力例：<span class="in_held_tab">開催中</span>）

    // thisからクラス名を取得して変数に格納
    var thisclass = $(this).attr('class');

    // 表示中マークにするクラス名の変更（削除してから新たに追加）
    $('#display_mark').removeClass().addClass('display_mark').addClass(thisclass);
    
    // tab-content内の要素に対して繰り返し処理
    $('.tab-content>div').each(function () {
    // this要素に対して変数に格納したクラス名があれば表示
      if ($(this).hasClass(thisclass)) {
        $(this).fadeIn(800);
      }
    // this要素に対して変数に格納したクラス名が無ければ非表示
      else {
        $(this).hide();
      }
    });
  });
});

追記①

SCSSの記述

  .held_tabs{
    width:80%;
    margin:10px auto;
    position:relative;
  }
  .tab-buttons span{
    font:400 14px 'open sans',sans-serif;
    color:#333;
    background:#eee;
    cursor:pointer;
    border-bottom:2px solid #ddd;
    display:block;
    width:33.3%;
    float:left;
    text-align:center;
    height:40px;
    line-height:40px;
  }
  .tab-content{
    text-align: center;
    width:100%;
    border-bottom:3px solid #ddd;
    padding:15px;
    background:#eee;
    display:inline-block;
    font:400 13px 'open sans',sans-serif;
    color:#333;
  }
  #display_mark{
    width:33.3%;
    height:2px;
    background:#333;
    display:block;
    position:absolute;
    top:40px;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }
  #display_mark.in_held_tab{
    left:0;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }
  #display_mark.before_held{
    left:33.3%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }
  #display_mark.after_held{
    left:66.6%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }

行った事

初期表示を設定すればいいと思い下記を付け加えましたがうまくいきません。。
（使い方が間違っている..? 汗）

$(document).ready(function () {

  $(".tab-buttons").tabs({　　←※※※　ここの３行を追加　※※※
  active: 0
  });

  // divのtab-contentクラスを非表示
  $('.tab-content>div').hide();
  // tab-content要素の中で最初の要素を取り出しスライドダウンで項目を表示
  $('.tab-content>div').first().slideDown();

これまでに調べていた事

・初期表示の設定の仕方
・Jsを再度読み込ませる？？（$(document).ready(function ()入れてあるのになぜか？も考えていました）
・初めて画面を読み込んだ際は、$('.tab-content>div').first().slideDown();で表示させているのでこれを使う

上記関連かと思い調べておりましたが原因が分かりませんでした。
Js初心者で伝え方にも分かりにくい点があるかと思いますがご教授頂きたいです。

Comments

[yambejp]

クラスの使い方が変ですが、相対位置とかでやっては行けないのでしょうか？
CSSがないのでdisplay_markクラスがどう影響するかわかりかねます

[ty_tech]

yambejpさん
アドバイスありがとうございます。
ご回答頂けたコードに置き換えてから操作しました。
実行結果：
変更後の変化としては、リロード後にどのタブも表示されませんでした。

※ご指摘いただいたCSSを追記致しました。

Answer 1

たとえば

  $('.tab-content>div').hide().eq(0).slideDown();
  $('.tab-buttons span').on('click',function () {
    var idx=$(this).index();
    $('.tab-content>div').hide().eq(idx).slideDown();
  });