I hope you can help. I've created a concept for a clients 'Customer stories' section and I plan to create a blog within Hubspot to achieve this. https://invis.io/8Y9TFGH42#/212095480_1_Airbus_Customer_Stories The question being - is it possible to create two separate ways to filter the blog posts? As you can see within the InVision prototype there are two drop downs showing a way to filter by either 'type' or 'region'. You can tag each post with these tags but how would I separate them out within the drop down menus? Please let me know if this explanation is enough. The InVision prototype should explain fully what I'm trying to achieve.
I actually accomplished a similar idea on Academy's website earlier this year. We already had filtering in place using a previous JS Plugin from the previous designer, so I based my solution off that. You can see the multi filter in progress here: http://academy.hubspot.com/examples
So we basically built it off of isotope.js, which basically works as if you set a little logic and some clas snames, you'll be able to filter throughout your list. To get this working, you'll want to look into isotope's combofilters luckily, they use a site called CodePen, so you are able to see every bit of code that goes into it here: Combo Filters with Checkboxes. Basically, to get ours working, I based my ideas off of his logic in that codepen, and updated it to work for what we needed.
To handle the filter in HTML, your filter will need to look like this:
And then for your filtering to work, you will need to append a class (this is set using HubL from your post template). You'll want a choice module for each type of filter, so for this example, I'll show you one that we are using:
{% choice "example_business_type" label="What type of business does this represent?", choices="-Select a Business Type-, B2B, B2C, eCommerce, EDU, Non-Profit", default="-Select a Business Type-", export_to_template_context=True, overrideable=True %}
and then, you would match up what is set in your listing template like this (we used HubL drop spaces, or convert them to hyphens):
<div class="span3 original example {{ content.widgets.example_business_type.body.value|replace(" ", "-")|lower }}">
So if you chose "B2B" from you choice select, the above class would be printed as:
div class="span3 original example b2b">
and the logic in your filter would say "when you click the button with a value of ".b2b" it will hide all others, but display:block; of the class b2b.
That's basically all you need to it! Most of the working JS exists in the above codepen, I just tweaked a few things to help us in other applications. Also, you will have to look into the checkbox hack, to make the checkboxes appear as buttons.