Link a card while having a nested link or collection inside
Webflow doesn't allow collections, rich-text-fields, or other links to be nested within a link block. This solution provides an alternate way to map the whole card to one link, while allowing other links to exist within the same card.
Step #1
Copy the clipboard <script> and paste this into the <head> of your page
<!-- CSS for Card click while having a nested link or collection -->
<link rel="stylesheet" href="https://g2fnzr.csb.app/click-card.css">
<!-- Click card while having nested links or collections -->
<script defer src="https://g2fnzr.csb.app/click-card.js"></script>
<link rel="stylesheet" href="https://g2fnzr.csb.app/click-card.css">
<!-- Click card while having nested links or collections -->
<script defer src="https://g2fnzr.csb.app/click-card.js"></script>
Step #2
Let's now implement this in Webflow
Click Trigger
I want this Div to be the item that can be clicked.
Add this to the element that should be clickable even if there is a link, rich-text-field, or if there is another collection nested within the element.
Click Target
I want to have the class or ID of this Link Block be the target that the Div will now also link to. [Example: "> .button"]
Add this to the same element as the "data-click-binder".
In this attribute, the ".class-name" can be replaced with an ID as well. (Example: "#target-id" instead of .class-name)
In this attribute, the ".class-name" can be replaced with an ID as well. (Example: "#target-id" instead of .class-name)
Link Setup
Add the link for the "data-click-binder" Div to a Link Block that is a child of that "data-click-binder" Div. Match the class or ID defined in your "data-click-binder-target" attribute.