Click on (not ) to close "disclosure statement"?

Question

Following the simple example shown here, <details>: The Details disclosure element [Mozilla.org], how can I click in the "details" to collapse those details?

For example, in the animated GIF below the upper portion is the "summary", which when clicked toggles the "details" (below).

In some instances those details will be quite long; I want to be able to click there, to collapse those details (rather than scrolling back up to the "summary" portion).

I am generating my HTML page via Ajax, so an Ajax/JQuery solution is likely what I'm after.

Here is the relevant section.

(function ($) {
    if (snippets_arr.length > 2) {
        fq_snippet += '<details><summary>' + snippets_arr.slice(0,2).join('<br/>');

        fq_snippet += '<br/>[toggle]</summary>' + snippets_arr.slice(2,).join('<br/>') + '</details>';
    }
    else {
        fq_snippet += snippets_arr.join('<br/>');
    }

  // Addendum: the solution involved this part of that file:
  init: function () {
      // add code here ...
        });
    });
  }
})(jQuery);

---

Update 1: solved, after chat with, code from @a.mola. Clicking on "summary" (top portion) toggles open / closed the "details" view (bottom portion).

New functionality: clicking on the "details" (when open, of course) collapses the "details" view.

This applies to all (i.e. multiple) "details/summary" elements on a page.

---

Update 2

I modified the code to remember and return to the scroll position, after you collapse the section.

var scrollPosition = null;

/* REMEMBER, SET SCROLL POSITION
  *
  * Here I implemented a scroll position ["scrollPosition = $(window).scrollTop(); ..."] addition
  * to my "<details>" code, so that when you collapse a long <details> section you return to the 
  * original <summary> position.
  *
  *   https://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery
  *   https://stackoverflow.com/questions/10836428/how-to-maintain-page-scroll-position-after-a-jquery-event-is-carried-out/10836745
  *   https://stackoverflow.com/questions/32573532/jquery-how-to-return-to-the-exact-same-scroll-position-when-going-back-to-previ
  */

$(document).click(function(event) {
    /* ORIGINALLY (per StackOverflow discussion with user a.mola -- referenced above):
      *
      *   if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) event.target.removeAttribute('open');
      *
      * Modified to following, to allow use of "scrollPosition" to reset scroll position
      * when collapsing long <details> sections.
      */

    // if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('closed')) {
    if (event.target.tagName == 'SUMMARY') {
        // SAVE THE CURRENT SCROLL POSITION:
        scrollPosition = $(window).scrollTop();
        // console.log('[summary click] scrollPosition', scrollPosition, '| type:', typeof scrollPosition)
        // ----------------------------------------
        /* NOTE: "return" here exits this AND following if statement: */
        // return scrollPosition;
    }   /* if (event.target.tagName == 'SUMMARY') {} */

    if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) {
        scrollPosition = scrollPosition;
        // ----------------------------------------
        /* COLLAPSE <details> ELEMENT BY CLICKING ON THAT [<details>] ELEMENT:
          *   Per user a.mola:
          *   https://stackoverflow.com/questions/66609261/click-on-details-not-summary-to-close-disclosure-statement/66609543#66609543
          */
        event.target.removeAttribute('open');
        // ----------------------------------------
        // SET THE SCROLL POSITION FROM STORED SESSION VALUE:
        $(window).scrollTop(scrollPosition);
    }  /* if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) {} */
});    /* $(document).click(function(event) {} */

Answer 1

Whenever the <summary></summary> tag is clicked / touched the open attribute is set on the <details></details> tag to expose the extra content.

By simply toggling the attribute on the <details></details> tag would implement the functionality you need.

(function($) {
    // ...
    $(document).click(function(event) {
        if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) event.target.removeAttribute('open');
    });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>