Link to and automatically open a toggler on another page

[barbs]

Hello all!

I have a situation where we have a single page with about 30 or so different C# code snippets. We have other pages that contain the main C# examples, and the page with all of the code snippets is just supporting code. Right now I have each code snippet set up with an H2 heading. Its a very long page, but from the main code pages, I have links that go to the specific related code snippet on the page with all of the snippets. This works, but the page itself can be a little intimidating because of so many H2 sections with so many (mostly unrelated code snippets). Each main code page might only reference 1-3 snippets on the snippet page.

What I'd like to do is turn all of these H2 sections into togglers, but I haven't yet been able to figure out how link to a specific code snippet on the snippet page AND open the toggler that I'm linking to.

Just throwing this out there hoping someone has an idea.

Thanks!
Barb

[devjoe]

If you put a bookmark inside the toggled section, and link to the bookmark, it should open the toggled section when you follow the link.

[barbs]

Good morning and thanks for you reply.

Yes, I did try this and it does work, but the toggler section has an H3 header (that is the actual toggle), and what I didn't like about this solution, is that the header for the section is then not visible. The toggled section is at the top of the visible page instead of the header.

My guess is that its going to take some JavaScript on the page so that when focus goes to the H3 heading it enables the click on the toggler. But JavaScript is not on of my strengths so that solution is probably a ways off.

[Psider]

You might try playing with :target::before in your stylesheet. I'm assuming it's just the toggle text that is being hidden off the top of the visible page, not some heading that might be further away from the toggle.

The following code basically adds some invisible content in front of any bookmark you link to. The invisible content pushes your real content down to where you need it. Try setting the height value to the height of your toggle text; you should be able to determine it using the Computed tab in the browser developer tools. Set the margin-top to the same, but negative - this slurps the exta space back so you don't get weird gaps.

Code: Select all

:target::before {
    display: block;
    content: "";
    position: relative;
    height: 130px;
    margin-top: -130px;
}

If you need to support IE or old Edge, this won't work, though. I used to use the following, but might not work if your bookmarks now use the new id method rather than the old a name method.

Code: Select all

a[name] {
    padding-top: 130px;
}

Not sure if this will be suitable as it's been a long time since I did this in Flare, but something to investigate at least.

[barbs]

Thank you Psider!
Definitely something I'll look into in this next week.

Barb