Отображение или скрытие элемента div на основе класса выбранной вкладки

У меня правильно настроены вкладки, то есть заголовки вкладок и контент отображаются правильно. Однако я хочу также отображать отдельный DIV прямо под вкладками в зависимости от того, какие вкладки активны.

На данный момент я получил правильный дополнительный div для отображения при начальной загрузке страницы, но нажатие на заголовки других вкладок не меняет отображаемый div.

document.addEventListener("DOMContentLoaded", function() {
  const tabs = document.querySelectorAll(".accomodation-tabs .sppb-tab-content .sppb-tab-pane");
  const galleryModules = {
    "standard-twin": ".twin-room-gallery",
    "standard-double": ".standard-double-gallery",
    "luxury-suites": ".luxury-suites-gallery"
  };

  // Hide all modules within the common container
  const allModules = document.querySelectorAll(".accomodation-gallery .sppb-addon");
  allModules.forEach((module) => {
    module.style.display = "none";
  });

  // Show the first gallery module (Twin Room Gallery) on page load
  const twinRoomModule = document.querySelector(".twin-room-gallery");
  twinRoomModule.style.display = "block";

  // Add event listener to tab container
  const tabContainer = document.querySelector(".accomodation-tabs .sppb-tab-content");
  tabContainer.addEventListener("click", function(event) {
    const clickedTab = event.target.closest(".sppb-tab-pane");
    if (!clickedTab) return; // Ignore clicks outside tabs

    // Hide all gallery modules
    Object.values(galleryModules).forEach((moduleClass) => {
      document.querySelector(moduleClass).style.display = "none";
    });

    // Show the corresponding gallery module based on the clicked tab
    const tabClass = clickedTab.classList[1];
    const moduleToShow = galleryModules[tabClass];
    document.querySelector(moduleToShow).style.display = "block";
  });
});