How to display ACF Pro’s Flexible Content data when clicking on hotspots of an image

In a recent PSD > WP project that I completed, the requirement for the Contact page was to display an image showing various locations below the navigation. When a visitor clicks on a location the corresponding contact details incl. a Google Map field's value should be displayed below the image.

In this article I share details of how I set this up. Be prepared for a long ride of HTML + PHP + jQuery + CSS all working in a perfect symphony for the end result (not yet live).

Below are the full inputs:

Contact page

The contact page has the global graphic where a user can click on the brand for each city to display the contact details and map. This should be created as an imagemap and inserted into the theme using a shortcode [dma_show_map]. The items that are clickable should be the brand logo, not the names of the cities. Clicking Ambition on Brisbane for example will show the ambition contact details for Brisbane

This shortcode should output all the code required to generate the content for this page

• image
• imagemap HTMLcode
• Divs that display depending on the city clicked

Below the map show the contact for Sydney by default when the page loads.

Then as the user clicks each city replace that with the correct data.

All of the address data has been added to the site using ACF. There is a “flexible content” field that’s been added and assign to the contact page.

All of the addresses have been entered inside this flexible content field.

Most locations have all fields. Where they don’t though, eg if a location is missing a fax field, do no simply that row of data.

Screenshot of Advanced Custom Field Pro's "Contact Group" Flexible Content group:

Step 1

Set the image as Featured image for the Contact Page, grabbed the URL, created a new HTML document in Dreamweaver, inserted the image and added hotspots for the various locations.

Step 2

Created a file named page-contact.php template which will automatically be used by Contact Page with opening PHP tag and closing genesis().

Displayed the featured image below nav along with the code for image map like so: