How To: Re-engineer element to create pagination type layouts - walkthru pages/guides, etc...
This requires both CSS and JS, but is otherwise fairly lightweight and minimal. You can see the effect in action here: https://stephenmthomas.github.io/ico2go/ (Just drag and drop the "ICO2GO" logo in the upper left down into the drop zone to begin the conversion. Its also a single filed - embedded CSS and JS so right click view source, save, whatever...) I recently built an SVG to ICO converter (couldn't find one online that did exactly what I wanted, though doubtless one exists) - and I decided for really no reason at all to tweak the details summary elements to serve the main areas of the document in a "step 1 2 3" fashion. I had styled the elements with CSS already - initially to serve as an "about this app" sections - styling it so it fades in and slides to size. Then decided to just use them as a sort of walkthrough wizard... I'm going to present the steps backwards because the CSS at the bottom is technically optional, although it adds a nice touch and I highly recommend both using that CSS and saving it for later use - its a good way to style those elements outside of this somewhat ridiculous use-case. So, essentially, we are going to be using scaffolding like this - completely hidden sections of the page, as large or small as you want, able to be turned on, off or toggle as you see fit. Each page or section or chapter of the DOM will live inside of a detail summary block like so: <details id="areaHelloWorld"> <summary style="display: none;">HIDDEN AREA - HELLO WORLD/summary> <!-- YOUR CONTENT HERE --> </details> Debatable practice abound here, but because the summary is hidden and inlined, you can still use normal detail-summary sections elsewhere. Anyway, depending on your content... there are now sections of the DOM that are unrendered. There is no conventional way - as far as I know - to open/reveal the content in the details section when the summary is not displayed. To hide or show these areas, you simply add the open attribute to the appropriate detai