How can I activate a specific button on the 'Filters' page after clicking a link on the 'Home' page in Webflow?
- Add a query parameter (e.g.,
?filter=category1) to links on the Home page. - Assign matching IDs (e.g.,
category1-btn) to filter buttons on the Filters page. - Use JavaScript to retrieve the URL parameter, find the corresponding button, and simulate a click.
You need to pass a parameter from the Home page to the Filters page and use custom JavaScript to activate the correct button. Follow these steps:
1. Add URL Parameters to Links
- Edit the button or link on the Home page.
- Set its href to include a query parameter, e.g.,
filters.html?filter=category1. - Replace
category1with a relevant value that corresponds to a button on the Filters page.
2. Assign Unique IDs or Data Attributes to Filter Buttons
- Go to the Filters page and add unique IDs or data attributes to your filter buttons.
- Example: Set
id="category1-btn"for the button you want to activate when?filter=category1is in the URL.
3. Add Custom JavaScript to Activate the Button
Place this script inside your Filters page (before
</body>in Page Settings or in an Embed Code block):```javascript
document.addEventListener("DOMContentLoaded", function() {
const params = new URLSearchParams(window.location.search);
const filterValue = params.get("filter");
if (filterValue) {
const targetButton = document.getElementById(filterValue + "-btn");
if (targetButton) {
targetButton.click(); // Simulate a click on the button
}
}
});
```This script:
Retrieves the filter parameter (
filter=category1).Finds the matching button (e.g.,
id="category1-btn").Simulates a click on the button to activate the filter.
Summary
Pass a query parameter from the Home page link (?filter=category1), assign matching IDs to buttons on the Filters page, and use JavaScript to detect and "click" the correct button automatically.