--- title: 'HTMLDetailsElement: toggle イベント' slug: Web/API/HTMLDetailsElement/toggle_event tags: - Event - HTMLDetailsElement - Reference - details - events - toggle - イベント translation_of: Web/API/HTMLDetailsElement/toggle_event --- <div>{{APIRef}}</div> <p><strong><code>toggle</code></strong> イベントは、 {{HtmlElement("details")}} 要素の <code>open</code>/<code>closed</code> の状態がトグル切り替えされたときに発生します。</p> <table class="properties"> <tbody> <tr> <th scope="row">バブリング</th> <td>なし</td> </tr> <tr> <th scope="row">キャンセル</th> <td>不可</td> </tr> <tr> <th scope="row">インターフェイス</th> <td>{{DOMxRef("Event")}}</td> </tr> <tr> <th scope="row">イベントハンドラープロパティ</th> <td>なし</td> </tr> <tr> <th>既定のアクション</th> <td>{{HtmlElement("details")}} 要素の <code>open</code> の状態をトグル切り替えする。</td> </tr> </tbody> </table> <h2 id="Examples" name="Examples">例</h2> <p>この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。</p> <h3 id="HTML">HTML</h3> <pre class="brush: html"><aside id="log"> <b>Open chapters:</b> <div data-id="ch1" hidden>I</div> <div data-id="ch2" hidden>II</div> <div data-id="ch3" hidden>III</div> </aside> <section id="summaries"> <b>Chapter summaries:</b> <details id="ch1"> <summary>Chapter I</summary> Philosophy reproves Boethius for the foolishness of his complaints against Fortune. Her very nature is caprice. </details> <details id="ch2"> <summary>Chapter II</summary> Philosophy in Fortune's name replies to Boethius' reproaches, and proves that the gifts of Fortune are hers to give and to take away. </details> <details id="ch3"> <summary>Chapter III</summary> Boethius falls back upon his present sense of misery. Philosophy reminds him of the brilliancy of his former fortunes. </details> </section></pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; }</pre> <h3 id="JavaScript">JavaScript</h3> <pre class="brush: js">function logItem(e) { const item = document.querySelector(`[data-id=${e.target.id}]`); item.toggleAttribute('hidden'); } const chapters = document.querySelectorAll('details'); chapters.forEach((chapter) => { chapter.addEventListener('toggle', logItem); });</pre> <h3 id="Result" name="Result">結果</h3> <p>{{EmbedLiveSample("Examples", 700, 200)}}</p> <h2 id="Specifications" name="Specifications">仕様書</h2> <table class="standard-table"> <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('HTML WHATWG', 'indices.html#event-toggle', 'toggle event')}}</td> <td>{{Spec2("HTML WHATWG")}}</td> <td></td> </tr> </tbody> </table> <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> <p>{{Compat("api.HTMLDetailsElement.toggle_event")}}</p>