Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


3 answers to this question

Recommended Posts

  • 0

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post

Link to post
  • 0

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.


Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension. 
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post

Link to post
  • 0

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 :)


Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...