Save webpage to include images within spoilers, and able to click those spoilers afterwards to view image inside

[endeavorz]

When saving a webpage PM message, or a webpage discussion, that has images within spoiler tags:
[spoiler] [/spoiler]
When I save the webpage, and open it, clicking the spoilers do not open to show the image within.
How to fix so that spoilers still work showing what's inside, with a saved webpage using Single File?

[gildas-lormeau]

See https://github.com/gildas-lormeau/SingleFile/blob/master/faq.md#why-dont-interactive-elements-like-folding-titles-dynamic-maps-or-carousels-work-properly-in-saved-pages

[endeavorz]

Okay thank you. Yes combinations of that work, but as you suggested it's complicated and can cause other unwanted effects - which it does. I've been trying variations of those settings but can't get it to exactly work like I want on a particular website. I think the only way I can get it to work right is to leave settings as they were default, but open each spoiler 'Before' I save the webpage, that way it's already opened afterwards... a PITA though, but doable.

We talked about this a few years ago and I was hoping there was a way around this, but not yet.

Thank you and for your work

[gildas-lormeau]

Another approach could be to write a UserScript that would for example unfold all the spoiler elements before saving the page (see https://github.com/gildas-lormeau/SingleFile/wiki/How-to-execute-a-user-script-before-a-page-is-saved for more info on how to integrate it with SingleFile).

[endeavorz]

It's maybe over my head to understand to do it, but a friend of mine showed me how to unfold or reveal and show multiple attachments counts all at once on a webpage, instead of hovering each one individually, via the console using:
$(".file-content .file-info").css("height", "5em");

I will see if I can get him to help me with this too following the information on your link.
That would be great if it could be incorporated into SingleFile and have it automatically unfold all elements before it saves it. How interesting. Thank you. If I succeed I'll come back and report.

[gildas-lormeau]

You're welcome, follow the instructions and use the UserScript below (warning: not tested). Hopefully, it should work as expected.

EDIT: You can use TamperMonkey, GreaseMonkey, ViolentMonkey etc. to setup this script.

EDIT 2: If it works then you should adapt // @match ... in order to make sure the script will only run on the correct website.

EDIT 3: This cannot be integrated into SingleFile because it cannot be generalized for all sites.

// ==UserScript==
// @name         Expand spoiler elements
// @namespace    https://github.com/gildas-lormeau/SingleFile
// @version      1.0
// @description  [SingleFile] Expand spoiler elements
// @author       Gildas Lormeau
// @match        *://*/*
// @grant        none
// ==/UserScript==

(() => {

  dispatchEvent(new CustomEvent("single-file-user-script-init"));

  addEventListener("single-file-on-before-capture-request", () => {
    document.querySelectorAll(".file-content .file-info")
      .forEach(element => element.style.setProperty("height", "5em"));
  });

})();

[endeavorz]

Good Morning, thank you very much. You have done extra helping me and I thank you for caring.
Please understand though you work on these things every day and you totally understand everything what to do, but for me I do not and am an average+ end-user, and so unless it's all detailed 'step by step' for me exactly what to do each step with this code putting it in your program - I don't know what to do to implement what you've given. I also can't expect you to hold my hand with it either though.. ..so for now I will just expand the spoilers And 'click to expand' items manually if I want to save a webpage with SingleFile and have it show afterards.
Your edit # 1 and # 2, I don't have that knowledge. As for your edit # 3, I realize each websites webpage will be different so I don't expect complete consistency across every website.
I'm simply looking for a way after I save a webpage that has contents like images or text inside spoilers, and/or a 'click to expand' section, that SingleFile will save it and importantly afterwards also let me open those spoilers and 'click to expand' items - and have it open to reveal what's inside it.
Right now with the way it's set default, what you see is what you get afterwards; iow, if spoilers and 'click to expand' are not opened before you save with SingleFile, they will not work after either.

To recap your other suggestion, it does help a little if I in different various ways
~uncheck "Network > blocked resources > scripts"
~optionally uncheck "HTML Content > remove hidden elements"
~uncheck "Stylesheets > remove unused styles",
~checkmark option "HTML content > save raw page"
...these can do it, but, it causes other other elements to show over, or you have to be online for it to draw from source, etc - so it's not perfect either.
So for now leaving it at default settings, I will just have to take the time to expand the spoilers and 'click to expand' items manually, if I want to save a webpage with SingleFile and see those same contents afterwards.