3 replies · opened Mar 21, 2021
Hi
I would like to enable/disable flip cards with JavaScript to update the styles/content.
Is there a straight forward way to do this?
I can change the css and icon on the flip card - so the content is not visible and the lock icon is used.
But I can find a way of easily disabling the flip action, while keeping the card visible.
Thanks
Hello,
Currently Flip Cards can only be used on the Hover event which is handled by CSS. There is no inbuilt Codes at the moment to handle this. However, the codes can be modified a bit to make this work. You will need to change every occurrence of .flip-card:hover .flip-card-front and .flip-card:hover .flip-card-back with .flip-card.flip-card-reverse .flip-card-front and .flip-card.flip-card-reverse .flip-card-back respectively in the style.css File. And then use JS to toggle the .flip-card-reverse Class on Click or whenever needed.
This should work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thanks for your quick response.
I ended up doing it slightly differently, but the that information helped.
Appreciated.
Cathy
Hello,
Glad that your issue was resolved.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard