<div class="accordion">
  <!-- Display: none; 版 -->
  <div class="accordion-item">
    <button class="accordion-header">Display: none; のアコーディオン</button>
    <div class="display-none accordion-content">
      <p>このコンテンツは display: none; で非表示にされています。</p>
      <p>ブラウザの検索で見つけることができません。</p>
    </div>
  </div>

  <!-- hidden="until-found" 版 -->
  <div class="accordion-item">
    <button class="accordion-header">hidden="until-found" のアコーディオン</button>
    <div class="accordion-content" hidden="until-found">
      <p>このコンテンツは hidden="until-found" で非表示にされています。</p>
      <p>ブラウザの検索で見つかると自動で表示されます。</p>
    </div>
  </div>
</div>

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-header {
  width: 100%;
  padding: 15px;
  text-align: left;
  background-color: #f7f7f7;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: #e2e2e2;
}

.accordion-content {
  padding-left: 15px;
}

.display-none {
  display: none;
}

.accordion-content[hidden="until-found"] {
  display: block; /* ブラウザが検索した際に表示されるための初期設定 */
}

document.querySelectorAll('.accordion-header').forEach(button => {
  button.addEventListener('click', () => {
    const content = (button.nextElementSibling as HTMLElement);
    
    // display: none; の場合
    if (content.classList.contains('display-none')) {
      content.style.display = content.style.display === 'none' ? 'block' : 'none';
    } else {
      // hidden="until-found" の場合
      if (content.hasAttribute('hidden')) {
        content.removeAttribute('hidden');
      } else {
        content.setAttribute('hidden', 'until-found');
      }
    }
  });
});