HTML5 Details/Summary Open at Top Close From Bottom

Question

I'm using HTML5's Summary/Details tags to hide/show extra text on a documentation page. The extra text is lengthy and the open/close nature of the summary tag is that you have to click on the summary line to make it both open and close the details block. This means that after scrolling down through the length of the long text you must scroll back up to the summary tag in order to click to close it.

I would like to be able to click on the bottom of the details segment to close it. Using CSS, I am able to add a 'close' triangle at the bottom of the detail segment. What can be done (preferably in CSS) to cause a click on the triangle to close the detail block?

details[open]:after {
   content:'▲';
}

Answer 1

Below is a CSS only solution, just use ::after on <summary> and absolute positioning.

details.test {
    position: relative;
    padding: 5px 0;
}

details.test[open]>summary::after {
    display: inline-block;
    content: "close";
    position: absolute;
    right: 0;
    bottom: 0;
}

<details class="test">
  <summary>Example</summary>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
</details>