1

Hopefully this question isn't a duplicate of Transitioning between open close in details element

Problem with html <details> when <summary> expanded

When html <details> has a <summary> that is clicked open, the user is forced to manually scroll to see expanded paragraph below the summary. In the following GIF example:

  • the "C" group of tags is expanded
  • manual scroll required to make "command-line" tag visible
  • the "command-line" tag is expanded
  • manual scroll required to make "2018-02-22" through "2018-03-26" date range visible
  • the "2018-02-22..." date range is expanded
  • manual scroll required to make posts in "2018-02-22..." visible

Sample GIF

Pippim post tags expand must scroll.gif

How to avoid all that manual scrolling?

It would be nice to avoid all the manual scrolling and simply make the browser do it automatically. Bonus if expanding and closing could "bounce open" and "bounce closed".

Perhaps jquery must be used as in this Q&A: Click expand with details and summary tag

Sample html and css / scss code can be provided. The website is generated by GitHub Pages. The html for tags by post is created by a custom python program because I didn't know how to do it using Jekyll / Liquid to parse the _posts/ directory and generate html with Kramdown idiosyncrasies taken into account.

WinEunuuchs2Unix
  • 1,801
  • 1
  • 17
  • 34
  • 1
    Is there any way to know the specific details tag you want to expand? Or is it always the last one you want into view – a.mola Dec 25 '21 at 21:15

0 Answers0