How can I apply product filters in my Figma tabs?

vandana3
Visitor
2 0 0

This is a Figma file. Filters are being applied in it, and I have created such a structure where different products will be in each tab. I want filters to work in my tabs. If you can provide me with the code, I would be very grateful. I will send you a screenshot.Screenshot from 2024-03-06 17-06-49.pngScreenshot from 2024-03-06 17-10-27.png

Reply 1 (1)

BenSmith1
Excursionist
13 1 2

This would be a basic example: 

document.addEventListener("DOMContentLoaded", function() { const tabs = document.querySelectorAll(".tab"); const tabContents = document.querySelectorAll(".tab-content"); const filters = document.querySelectorAll(".filter"); // Hide all tab contents except the first one tabContents.forEach((content, index) => { if (index !== 0) { content.style.display = "none"; } }); // Event listeners for tabs tabs.forEach(tab => { tab.addEventListener("click", function() { const tabId = this.getAttribute("data-tab"); tabContents.forEach(content => { if (content.id === tabId) { content.style.display = "block"; } else { content.style.display = "none"; } }); }); }); // Event listener for filters filters.forEach(filter => { filter.addEventListener("change", function() { // Implement filtering logic here }); }); });