JavaScriptの.nextElementSiblingでアコーディオンの開閉と画像の切り替え

// HTMLのリストアイテムを示す要素を取得
var currentItem = document.getElementById('current-item');

// currentItemの次の兄弟要素を取得
var nextItem = currentItem.nextElementSibling;

// 次の要素があれば、何かの操作を行う
if (nextItem) {
  // 例：次の要素のテキスト内容をコンソールに出力
  console.log(nextItem.textContent);
}

<div class="acco">
  <div class="accordion">Question one </div>
  <div class="panel">
  <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
  </div>
  <div class="accordion">Question two </div>
  <div class="panel">
    <p>Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューター</p>
  </div>
  <div class="accordion">Question three </div>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
  </div>
  <div class="accordion">Question four </div>
  <div class="panel">
    <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキス</p>
  </div>
</div>

<div id="imageContainer"><img src="https://source.unsplash.com/640x360/?dog"></div>

// DOMが完全に読み込まれた後に実行される関数を設定
document.addEventListener('DOMContentLoaded', function() {
  // 'accordion'クラスを持つすべての要素を取得
  var acc = document.getElementsByClassName('accordion');

  // 指定されたインデックスに応じた画像に切り替える関数
  function switchImage(accordionIndex) {
    var imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '<div class="loader"></div>'; // ローディングスピナーを表示

    // 画像URLの配列
    var imageUrls = [
      'https://source.unsplash.com/640x360/?nature',
      'https://source.unsplash.com/640x360/?city',
      'https://source.unsplash.com/640x360/?technology',
      'https://source.unsplash.com/640x360/?space'
    ];

    // 新しい画像要素を作成
    var img = new Image();
    img.onload = function() {
      imageContainer.innerHTML = ''; // 画像が読み込まれたらスピナーをクリア
      imageContainer.appendChild(img); // 画像を表示
    };
    img.onerror = function() {
      imageContainer.innerHTML = '画像を読み込めませんでした。'; // 画像の読み込みに失敗した場合のメッセージを表示
    };
    img.src = imageUrls[accordionIndex]; // 画像のURLを設定
  }

  // 各アコーディオン要素にクリックイベントリスナーを設定
  Array.from(acc).forEach(function(element, index) {
    element.addEventListener('click', function() {
      // 他のアコーディオンから 'active' クラスを削除し、そのパネルを閉じる
      Array.from(acc).forEach(function(el) {
        if (el !== element) {
          el.classList.remove('active');
          el.nextElementSibling.style.maxHeight = null;
        }
      });

      // クリックされたアコーディオンの 'active' クラスをトグルし、対応するパネルを開閉
      var isActive = element.classList.toggle('active');
      var panel = this.nextElementSibling;
      if (isActive) {
        panel.style.maxHeight = panel.scrollHeight + "px"; // パネルを開く
      } else {
        panel.style.maxHeight = null; // パネルを閉じる
      }

      // アコーディオンに応じた画像を切り替える
      switchImage(index);
    });
  });
});

.accordion {
    display: block;
    line-height: 50px;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.5s ease-in;
    position: relative;
    padding-left: 60px;
    height: 53px;
    margin: 0;
    border-radius: 5px;
    background: #FFF;
    margin-bottom: 15px;
    font-weight: 600;
}
.accordion:before {
    content: "Q";
    position: absolute;
    left: 15px;
    top: 50%;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 21px;
    background: #313131;
    color: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}
.accordion.active {
    margin-bottom: 0;
}
div.panel{
  max-height:0;
  overflow:hidden;
  transition: 0.3s ease-out;
}
.panel p {
    padding: 10px 20px;
    background: #fafafa;
    margin: 0 0 15px;
    position:relative;
    padding-left: 60px;
}
.panel p:before {
    content: "A";
    position: absolute;
    left: 15px;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    text-align: center;
    font-size: 21px;
    background: #e80000;
    color: #fff;
    border-radius: 50%;
}
.acco{
  position:relative;
}
div.accordion:hover{
  background-color: #ddd;
}
div.accordion:after {
    content: '\02795';
    font-size: 1rem;
    color: #777;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-46%);
}
div.accordion.active:after {
    content: "\2796";
}
div#imageContainer {
    position: relative;
    background: #f9f9f9;
    width: 100%;
    min-height: 340px;
}
#imageContainer img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}