Skip to content

Instantly share code, notes, and snippets.

@cballenar

cballenar/toggleSummaryMessage.js

Last active December 11, 2022 12:16
Show Gist options
  • Save cballenar/89be83d0625877ed9fee2a6b337e71eb to your computer and use it in GitHub Desktop.
Save cballenar/89be83d0625877ed9fee2a6b337e71eb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cballenar revised this gist Dec 11, 2022. No changes.
  2. cballenar revised this gist Dec 11, 2022. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions toggleSummaryMessage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,15 +2,15 @@
    * Toggle Summary Message.
    * Changes the content of a details' summary to indicate whether clicking it
    * will open or close it. Assumes the <summary> lies directly under the
    * <details> tag.
    * <details> tag and contains `data-message-open` and `data-message-close`
    * attributes with the respective values for each case.
    *
    * @param {Event} event
    */
    function toggleSummaryMessage(event) {
    const summary = event.target;
    summary.innerText = summary.parentElement.open ? summary.dataset.messageOpen : summary.dataset.messageClose;
    const summary = event.target;
    summary.innerText = summary.parentElement.open ? summary.dataset.messageOpen : summary.dataset.messageClose;
    }

    // call for all summaries
    const summaries = document.querySelectorAll('details summary');
    summaries.forEach((detail)=>detail.addEventListener('click',toggleSummaryMessage));
    summaries.forEach((detail)=>detail.addEventListener('click',toggleSummaryMessage));
  3. cballenar created this gist Dec 11, 2022.
    16 changes: 16 additions & 0 deletions toggleSummaryMessage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    /**
    * Toggle Summary Message.
    * Changes the content of a details' summary to indicate whether clicking it
    * will open or close it. Assumes the <summary> lies directly under the
    * <details> tag.
    *
    * @param {Event} event
    */
    function toggleSummaryMessage(event) {
    const summary = event.target;
    summary.innerText = summary.parentElement.open ? summary.dataset.messageOpen : summary.dataset.messageClose;
    }

    // call for all summaries
    const summaries = document.querySelectorAll('details summary');
    summaries.forEach((detail)=>detail.addEventListener('click',toggleSummaryMessage));