Click and Load Below?

Site URL: https://www.waynesboro.org/

Hi there! 

Client wants a similar click and load like this example:

http://www.corpangelnetwork.org/#/Patients

Where you click an image, and the content below it swaps out.

Does anyone know if this is possible with some code? And what the code might be 😆

Please and thank you!

If you do each item in a section, javascript can be used to display the correct one

Hi Lesley

As this is a Brine-family template, it has the Ajax-Loading feature, so there are a number of ways to achieve this.

• As rwp suggests above, you could create a single index page, with a section for the patient images and titles, followed by a section for the details of each patient. These sections could then be selectively hidden or shown in response to clicks on the top row of patient images. This approach requires some code, although it's very simple. The main downside is the page load time. When the page loads, all sections (and all their content) will be loaded, even if the visitor doesn't want to view the hidden patient stories. 
• A no-code solution is to create several pages, each containing the top row of patient images, but each containing a single patient's details below. By hyperlinking the top row of images/titles to each of the patient detail pages., the content for the relevant section would then be loaded using Ajax. The downside is that if you ever want to change the top row, you'll need to edit it on each one of the pages. 
• The solution that would be easiest for the client to update in the future is to add a blog collection and place each one of the patient's details in a post. The page could be built with a Grid Summary Block (linked to the blog) to automatically show the top row of patient photos and titles. Below this, a code block would be used to pull the content from the first post on initial loading. When a different patient image was clicked, the content from that blog post would then be pulled in to replace the previous content.

I hope this helps.

Paul

Will Myers on youtube does a tutorial on how to add tabs to a single page that will display/hide specific blocks on a page. You could try that, and perhaps ask him how to include images to the buttons :)