scroll-behavior:smooth; is a CSS property that can make scrolling smooth when clicking anchor links.

Note that there does not seem to be a way to control the scrolling speed, and the default speed is too slow in my opinion (especially in chrome-based browsers). So if you need to scroll around a lot, it might get annoying.

More info: developer.mozilla.org

There's 3 different methods here for a similar goal; toggling something on/off. All have their own pros and cons and none of them is clearly better than another. (Note: if you don't need to interact with the contents, then there's another technique with tabindex ↓).

• <details> is a html element that was made precisely for this purpose, but has certain limitations. For simple static boxes (such as this information box), this is usually the best method.
• Anything with an ID can be targeted from CSS using :target when the page URL has #anchorname in it. Links pointing to that anchor can then be used to toggle it.
• Checkboxes can be used to modify nearby elements with CSS + and ~ selectors, and the checkbox itself can be toggled from different places using <label> elements. This is in my opinion the most powerful method, but also the most "hack"-like method since this isn't what inputs are meant for.

<details> method pros:

+ simplest, and arguably least "hacky" method, since <details> was made for this purpose.
+ has a natural mechanism for highlighting the toggle button.

<details> method cons:

- can only be toggled from a single location, the only way to add another toggle button is to put it inside and use absolute/fixed position to place it outside the container.
- the toggle button MUST be right next to contents in html.
- always resets when page refreshes.
- cannot animate properly because the contents are forcibly toggled on/off by html.

Anchor method pros:

+ can be controlled with URLs and combine links with the anchor, e.g. website.net/index.html#hoverbox will open the box when you open the page.
+ if the anchor doesn't change, keeps toggled state when the page refreshes.
+ can be toggled from multiple locations.
+ can be toggled without the button by typing in the address bar.

Anchor method cons:

- for the most part only useful for hovering boxes, since any target that isn't hovering will cause the page to scroll.
- the page may scroll to the target on page refresh whether you want it or not, even if the target is hovering.
- will toggle off if you use anchor links to jump around the page.
- requires separate buttons for closing the box and for opening it.
- requires hardcoded ID for each target.
- the further the contents are from the link, the harder it becomes to style the link when it's toggled.

+/- will toggle off if any other anchor is activated (e.g. for scrolling the page). This may be either desireable or not depending on what you're using it for. For example it's good if you want multiple boxes and only one of them activated at once. It's bad if you never want it to toggle off unless manually closed.

Checkbox method pros:

+ can be toggled from multiple locations.
+ all toggle buttons can toggle it both on and off.
+ keeps toggled state when the page refreshes.

Checkbox method cons:

- may interfere with forms since an input element is involved.
- if the contents are inside the label, clicking the contents will toggle it.
- if the contents are not inside the label, requires a hardcoded ID for each target.
- the further the contents are from the label, the harder it becomes to style the label when it's toggled.

A somewhat more esoteric version of the checkbox toggling method. Instead of checkboxes, you can use radio buttons with a name, this causes all the other radio buttons to be toggled off whenever you toggle one of them.

There's 2 different styles: vertical and horizontal. The vertical one is slightly more practical because you can style it properly and don't need to give every tab a unique ID.

Caveats:

Since the radio inputs require a name, it might be particularly bad to use this inside forms.

Highlighting the active tab button in the horizontal style is technically possible, but it would require hardcoding CSS rules for each tab separately.

You cannot unselect a radio button, so one tab will always stay open. They can all be closed when the page loads though.

Regular <a> links can be opened inside an iframe that is on the same page by using the target and name properties.

<a href="something.html" target="contentframe">Coolstuff</a>
<iframe name="contentframe"></iframe>

Caveats:

If you click a link inside the iframe, it will open inside the iframe. You cannot use a link inside an iframe to navigate away from the current page.

It is inconvenient to share a link into a specific page in the iframe. This, combined with the above, makes this technique kind of bad for creating a website navigation menu.

The goal of this technique is to load large images only after the image is expanded, not on page load. Until the user toggles the image, only a thumbnail will be loaded.

To accomplish this reliably, we can use inlined CSS variables to load the image as a background.

Additionally, a technique I call "aspect ratio box" is used so that the image can be displayed in correct proportions regardless of what size the image scales into. Basically, percentages used on any padding (including top and bottom) are based on the parent element's width. So if you set padding-top to 50% and the parent's width is 200px, the padding-top will end up at exactly 100px. To get the padding-top value for a given image, use this calculation: (height / width * 100)

You can do this in various ways by using different toggleable element ↑ techniques, the examples below are nowhere near every option.

Caveats:

The image will not show up while it's loading, the entire image needs to finish loading before it shows up. Therefore if it loads slowly, it may look like it's broken.

The expanded image cannot be saved by right click or dragging it out of the window since it's a background-image. To make the image easier to download, you can wrap the whole thing inside a link to allow middle/right clicking to open/save it. Firefox seems to exhibit buggy behavior where left clicking sometimes opens the link instead of expanding the image though.

Research?

• Supposedly if an element is hidden with display:none, it's background image and none of it's child nodes' background images load. This behavior seems obscure and not well defined though so I wouldn't rely on it.
• Images that have loading="lazy" property should not load when they are hidden. However note that disabling javascript may disable lazy loading.

Tabindex is a html property that can be used to "focus" things that you click. Simply add tabindex="0" to an element, and you can then detect focus from CSS with :focus.

The most useful thing I've found for this is containing large amounts of text into smaller containers. With this method you can freely scroll around the container and select text and click links. An alternate way to scroll the container is to use :hover instead of :focus, but that will interfere with scrolling down the page normally.

Caveats:

I don't know how/if this behaves on mobile devices.

When you click a link inside the container, the container becomes unfocused before the link is clicked. This may make it hard or impossible to click links inside of it in some situations.

Tabindex also causes the container to get focus when you press the tab key, which can be good or bad. Be careful if keyboard navigation is important (for accessibility or otherwise). The tabindex value determines the focus priority when pressing the tab key. 0 is the same priority as everything else on the page, higher numbers give it a lower priority.