boostrap3 でタブ制御方法を教えて欲しい

Question

boostrap3 でのタブ制御

*現状

下記の様にboostrap3でタブを画面初期表示で基本情報+月～日を生成し表示しています。
基本情報タブは消せないですが、月～日のタブは消せる仕様なので、
javascriptを使用してボタンが押下される毎に日→月とタブを消しています。
但し、基本情報タブになった時だけ基本情報タブのヘッダー？だけを削除し、
データ部分の<ul>～</ul>の内容を表示するようにしたいです。

*実現したい事

基本情報タブになった時だけ基本情報タブのヘッダー？だけを削除し、
データ部分の<ul>～</ul>の内容を表示するようにしたいです。
テラテイルの過去の投稿やネットでみたのですが、ヒントになるソースが無かったので投稿いたしました。
アドバイスをよろしくお願い致します。

試した事

基本情報タブのタブ部分はjavascriptで消せたのですが、基本情報を<ul>～</ul>に切り替わりません。

<div role="tabpanel" data-example-id="togglable-tabs">
  <ul class="nav nav-tabs bar_tabs" role="tablist" id="controlTab">
    <li role="presentation" class=""><a href="#mondayTab" id="monday-tab" role="tab" data-toggle="tab" aria-expanded="true">月曜日</a></li>
    <li role="presentation" class=""><a href="#tuesdayTab" id="tuesday-tab" role="tab" data-toggle="tab" aria-expanded="true">火曜日</a></li>
   // 省略 //
   <li role="presentation" class=""><a href="#sundayTab" id="sunday-tab" role="tab" data-toggle="tab" aria-expanded="true">日曜日</a></li>
  </ul>
  <div class="tab-content">
    <!-- 基本情報 -->
    <div role="tabpanel" class="tab-pane fade active in tabInfo" id="baseTab" aria-labelledby="base-tab">
　　　<ul>
     <li>
　　　//　基本情報の内容表示部分　//
     </li>
     </ul>
    </div>
  <!-- 月 -->
  <div role="tabpanel" class="tab-pane fade tabInfo" id="mondayTab" aria-labelledby="monday-tab">
　　　<ul>
     <li>　
　　//　月曜の内容表示部分　//
     </li>
     </ul>
  </div>
  <!-- 火 -->
　<div role="tabpanel" class="tab-pane fade tabInfo" id="tuesdayTab" aria-labelledby="tuesday-tab">
　　　<ul>
     <li>
　　　//　火曜の内容表示部分　//
     </li>
     </ul>
  </div>
　//　省略　//
　<!-- 日 -->
  <div role="tabpanel" class="tab-pane fade tabInfo" id="sundayTab" aria-labelledby="sunday-tab">
　　　<ul>
     <li>
　　　//　日曜の内容表示部分　//
     </li>
     </ul>
  </div>
</div>

  function delBaseTab() {
    $("#base-tab" ).remove();
  }

Answer 1

削除するより非表示のほうがいいかもしれません。

    $('#base-tab').tab('show').hide();

https://getbootstrap.com/docs/3.3/javascript/#tab-show

Comments

[t-ju]

x_x様

回答有難うございます。
試してみたいと思います。