<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<div class="tabwrap">
  <div class="tabbtn">
    <button>タブ1</button>
    <button>タブ2</button>
    <button>タブ3</button>
  </div>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h1>タブ1</h1>
        <p>タブ1の中身が入りますタブ1の中身が入りますタブ1の中身が入りますタブ1の中身が入りますタブ1の中身が入ります</p>
        <h2>アコーディオン</h2>
        <div><button class="js-accordion">開閉ボタン</button></div>
        <div class="js-accordionTarget" style="display: none;">
          <p> アコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入りますアコーディオンの中身が入ります </p>
        </div>
        <h3>画像</h3>
        <div>
          <img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=tab01" alt="">
        </div>
      </div>
      <div class="swiper-slide">
        <h1>タブ2</h1>
        <p>タブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入りますタブ2の中身が入ります</p>
        <div>
          <img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=tab02" alt="">
        </div>
      </div>
      <div class="swiper-slide">
        <h1>タブ3</h1>
        <p>タブ3の中身が入ります</p>
        <div>
          <img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=tab03" alt="">
        </div>
      </div>
    </div>
  </div>
</div>
<h1>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</h1>

body {
  max-width: 640px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.tabwrap {
  border: 1px solid #000;
  padding: 20px;
}

.tabbtn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

let initialSlideNum = 0;
if (getParam("initialSlideNum")) {
  initialSlideNum = getParam("initialSlideNum");
}
const swiper = new Swiper(".swiper", {
  effect: "fade",
  //１つ目のタブ以外を最初から開いておきたい場合はパラメーターから値を取得
  initialSlide: initialSlideNum,
  fadeEffect: {
    crossFade: true
  },
  //基本的にtabの場合はドラッグで切り替えは必要ない
  allowTouchMove: false,
  //タブごとに中身が異なる場合は高さを可変させる
  autoHeight: true
});
$(".tabbtn button").click(function () {
  swiper.slideTo($(this).index());
});
$(".js-accordion").click(function () {
  $(".js-accordionTarget")
    .stop()
    .slideToggle(100, function () {
      swiper.updateAutoHeight(200);
    });
});

/**
 * Get the URL parameter value
 *
 * @param  name {string} パラメータのキー文字列
 * @return  url {url} 対象のURL文字列（任意）
 */
function getParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return "";
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}