Flip tile once selected

[CandiceLloyd]

"I'm wondering if we can change the functionality of a page. Ideally, the page would have the events organized in tiles of three horizontally. The front of the tile would have the graphic, title, and date of event. After the tile is clicked on, it flips over without the page changing and additional write up and details are on the flip side (including link to register).Maybe not load it... but have a link to it as well as the detailed description of the event that is already listed?? Not load the event... but have a link to it as well as the detailed description of the event that is already listed??"

How would I go about implementing this?

This is not something I have done before.

I appreciate any help and feedback.

Regards,

Candice

[AJLaPorte_diagr · Accepted solution]

Hi @CandiceLloyd,

I found this codepen that may be a good start to helping you get the basic card flipping down: https://codepen.io/Zacaree/pen/ZvQjOG

Essentailly they are using JS to toggle a class on the card with the onclick event. You could use this as a base and then add in the HubL for the events. How you choose have the events generated would be up to you. You could do this one of two ways:

1.  Manually through a repeating group in a custom module. You could then use a page selector in the module to allow them to link the "More Info" button on the back of the card to another page either on the CMS or externally. Note: doing it this way would mean that when an event is over, you would most likely have to go in and manually delete the event card. 
2. (Recommended) Using HubDB to generate the events and list them out. Using the Dynamic pages with HubDB would allow you have the ability for them to click a button in the info part of the card and be redirect to a page with more details on it. The benefit of this is the ability to add parameters on the items that would be pulled in so you could have past events be skipped from pulling onto the page. 

For more information on HubDB, see here: 
https://designers.hubspot.com/docs/tools/hubdb 
https://designers.hubspot.com/docs/tutorials/how-to-build-dynamic-pages-with-hubdb

For info on using repeating fields see here:
https://designers.hubspot.com/docs/modules/repeating-fields-and-loops

Hope this helps point you in the correct direction!

-----------------------
AJ LaPorte
www.wearediagram.com

[CandiceLloyd]

Hi AJ,

This is perfect thank you, so much information which will be incrediably useful!

Thank you for all your effort and going into detail, I am positive that I will be able to use something from which you have provided.

Thank you again!

Kind regards,

Candice

[jennysowyrda]

Hi @CandiceLloyd,

Are you referring to setting something up like this? 

Additionally, @AJLaPorte_diagr helped a user with a similar request in this thread. 

Here is another conversation on the Community discussing the same thing. 

If you are looking to create something else, please let us know. The more details, screenshots and links (including examples) that you can share, the better the Community can assist.

Thank you,
Jenny

[CandiceLloyd]

Hi Jenny,

Thank you so much for the feedback and additional links.

I will have a look through them and see what I can apply to our website.

Kind regards,

Candice