View Details in a collapsible/expand view, instead of new page redirect

Under page views, I would like the details of my records to show up on the same page view as the searches appear. Right now, users have to click a “view” hyperlink and are taken to a separate page. It would be great if users could click view, and the details would appear as an accordion underneath and with a chevron arrow that they open or collapse. So instead of “view” option, I want an “expand” option.

Any suggestions?

My app: https://www.helpmegrow.org/Directories

Try setting the child page as a pop up. When the users clicks “view” it will open the page in a modal pop up view rather than taking them to the child page:

The view link is navigating the user to the child page so you can’t show this as an accordion at the parent level.
This may not work well on mobile as the page is embedded. May be easier and more practical for the user experience to leave as is.
Bear in mind the 60% of users likely access your site on mobile devices nowadays.

You may also want to look at the amount of records your map is displaying as it’s set to show only 10 records per page. This shows results for New York on 294 pages.
Increase the limit of records to 100 and allow the user to set higher. Maximum is currently 1,000.

Also, I’d recommended setting the Starting Range to “Any” rather than 10 miles.

If you set the Starting Point as the User’s Current Location the map will automatically load some results when the page renders, making the experience more intuitive.

Hey Carl: I think the modal pop up is a better solution than the child page; and though it’s not perfect, it doesn’t look too bad on mobile.

Thanks for the suggestion! As a non-developer/programmer, it’s a big help.

1 Like

Hey @Samantha

I’m glad this tip was of use. I often set the details page to a modal pop up so it saves navigating to another page, especially if the page only has a small amount of data to display.
A pop up means that once closed the user is on the same page without having to navigate back.

Wherever possible, I like to use Knacks native features rather than bespoke code. :blush:

Have fun building :rocket: