Had a go at implementing this and something is definitely happening now, although I’m getting some weird effects… Would you mind making this cloneable? I’m definitely missing something relatively to adding 'list and .table classes to the container.
Need to work on styling now and to also to add .classes to the .mix element via js.
However, after switching between views over and over again I realised this might not be the best option from a UX point of view. Basically, the transition between the grid view to a list view is not as pleasant as it would be if a slick fadeIn-fadeOut effect with some delay in between was used. Let’s say, it’d be more relaxing for the viewer.
For this reason, I’m still convinced the best option would be using Tabs for switching between views.
Hi @sabanna I just found your tutorial, really great to see this possible in webflow, many thanks for posting
I’d like to use this to filter CMS blog posts (in a dynamic list), and notice you mention more scripting would be needed, do you have any example or more detail of this? No worries if it’s time consuming but any help or pointers you can give would be welcome!
Thanks guys, I’ll take a look – @Omar_Melizza, what was it you did/added (if anything?) to get @sabanna’s implementation working with dynamic lists?
I haven’t started building yet – I was planning to follow the tutorial and wanted to confirm that it will work with dynamic lists before spending the time and finding out after that it doesn’t! Thanks for any advice…
I’d say the best thing for you is to clone my webpage and have a look around there as well as checking out @sabanna’s fantastic tutorial on the subject.
by all means, if after doing this you still have doubts get in touch with us. I’ll be happy to help.
Hi @Omar_Melizza, Yes, all working! Thanks for your help
I used the code below to dynamically get the text from the filter buttons and add it as a data-filter attribute (with a full-stop character as though a class name as per the tutorial from @sabanna). For anybody trying this, note that this doesn’t want applying to an ‘All’ filter button or you end up with data-filter=".all" where mixup requires data-filter="all" – so I just made sure the all filter button was not in the dynamic list.
var anchors = $('.b-category-link-dynamic');
anchors.each( function() {
var a = $(this);
var txt = a.text().toLowerCase();
a.attr('data-filter','.' + txt);
});