Little help? Link and anchor to a static collection page

[clncsports]

Hey there. It seems like what I’m after here ought to be a pretty straightforward implementation but, while I’m close, I can’t for the life of me get this over this finish line.

I have a job board app running on a dynamic collection that I’d like to change to static. Btw, I’m happy to use a bit of javascript to achieve this.

Example: I want it to essentially behave like this in terms of pages: https://remoteok.com/

My home page displays a collection list. The collection items (jobs) are represented by expandable elements (either actual accordions or just conditionally displayed divs - I’ve tried using both to achieve this; I shifted away from the accordion element as I couldnt figure out how to control its state on load, but we’ll save that for another post). Upon clicking a job, I want to go to the collection page for that job.

Job collection page
Instead of going to a typical job listing type page, the job collection page will be essentially exactly the same as the home page (using linked sections for all) except with the expanded view of that job. To the user, it looks like they never changed pages. It just looks like the job accordion got expanded. If they click it again (“close it”), they’re taken back to the home page.

I already have my pages (home page and “mirrored” collection page) setup, but I can’t figure out how to properly link & anchor to the collection page so that the selected job is in-view after the user clicks. It just goes to the top of the page. I also don’t want a scroll-to behavior on-load. I just want the page to open in the same spot it was in. I have unique IDs on each collection item since i assumed it would be as simple as throwing an anchor link on the end of my url…no dice.

I’ve tried every which way I can think of to get an anchor to come through the link to the collection page, but not success.

If someone could point me in the right direction here, I’d greatly appreciate it!

[clncsports]

A couple ideas that are maybe in the right direction but I haven’t been able to get them to suceed:

Using Link Section
Can I somehow bind the Section field in order to link to an element within a section (by ID), instead of just a section? If so, what would the syntax for this look like?

Page load workflow
Use on on page load workflow to set location.hash to an id value that I set on-click (i.e. when user clicks on a job, I change a variable value to that item’s id, then read it in my on page load workflow on the collection page.

Am I thinking in the right direction here?

[dorilama]

if the second page is exactly the same as the first page but with the expanded section, can’t you just create the expanded section in the first oage and show it conditionally with workflows?
If you struggle handling the state of the section because it’s in a list have a look at this post where I explain how to keep track of checkboxes in a colletion list. You can use a similar logic.

[carri]

@clncsports

https://remoteok.com/

I’m not super advanced. I So I’m a bit doubtful my solution will help you. But here’s my take.

Could you create a variable for the collection summary div you want to show & hide on click? And just trigger that when your summary collection div is clicked?

I did something similar here. I was using a div at first and it worked. But switched to a button b/c that worked for me as well.

Then you could make the the entire detailed div section change page on click. Not sure why they don’t have a link block so that the detailed section can easily have a hover state. If that’s critical, it’s past my expertise.