インタラクティブエレメント

    
      <details>
        <summary>見出し</summary>
        <!-- 隠されたコンテンツ -->
      </details>
    
  

    
      <details open>
        <summary>基本情報</summary>
        <p>この情報はデフォルトで表示されています。これはopen属性が設定されているためです。</p>
      </details>
    
  

    
      <details>
        <summary>見出し</summary>
        <!-- 隠されたコンテンツ -->
      </details>
    
  

    
      <details>
        <summary>詳細情報</summary>
        <p>これは隠されたコンテンツで、ブロックを展開すると表示されます。</p>
      </details>
    
  

    
      <details>
        <summary>詳細情報</summary>
        <p>これは隠されたコンテンツで、ブロックを展開すると表示されます。</p>
      </details>
      <details open>
        <summary>基本情報</summary>
        <p>この情報はデフォルトで表示されています。これはopen属性が設定されているためです。</p>
      </details>
      <button id="toggleDetails">折りたたむ/展開</button>
    
  

    
      // id 'toggleDetails' のボタンを見つけて、'click' イベントハンドラを追加します
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // ページ上のすべての 'details' エレメントを見つけます
        document.querySelectorAll('details').forEach(detail => {
          // 各 'details' エレメントの 'open' プロパティの値を反転させます
          detail.open = !detail.open; 
        });
      });