content filters
January 15, 2015 | 156 Feedbacks

Content Filter

A slide-in filter panel powered by CSS and jQuery.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

A well-designed filter is a powerful tool users can take advantage of. It is actually an essential feature if your website has lots of content, distributed across different categories. For an e-commerce, it is a way to increase conversion rates by reducing the time needed by the user to find what he’s looking for.

Building this kind of features is never easy: filters highly depend on the website content; besides a filter panel shouldn’t be distracting, the main focus should be the content/products. Hence, we tried to simplify a bit your life by building an easy-to-customize and easy-to-integrate CSS filter panel for you. High five!

It takes advantage of CSS Transitions, CSS Transformations and jQuery muscles to smoothly slide in when needed.

Credits: we integrated MixItUp, which is a great jQuery plugin (free to use in non-commercial projects) created by the talented Patrick Kunka.

Creating the structure

The HTML structure is a bit more complex than usual. First of all, there are 2 main blocks of content: the <header> and the <main> elements, the second one being used to wrap both the gallery (.cd-gallery) and the filter (.cd-filter). In addition to that, we have the tabbed navigation (nested in 2 <div> elements, due to the drop-down effect visible on mobile devices) and the filter trigger (.cd-filter-trigger).

You may also notice a lot of class names (i.e. on the gallery list items) and data-filters: they are used to filter the content, not for styling purpose.

Note: the purpose of the .cd-gallery > element is to work in combo with the text: justify; property applied to .cd-gallery in order to create the gallery grid. You need to create as many .gap elements as the max number of items in a row -1.

Adding style

Most of the CSS is about styling form elements and other basic embellishments. What’s interesting is how we defined and used some classes – in combo with jQuery – to change the behaviour of some elements, based on specific events.

For example: on all devices, the filter bar gets fixed once it reaches the top of the viewport. To achieve this effect, we used the class .is-fixed, applied to the <main> element (.cd-main-content), so that we could target some of its children. Specifically: the .cd-tab-filter-wrapper is in static position, while the .cd-filter and .cd-filter-trigger are in absolute position (relative to the .cd-main-content). When we apply the .is-fixed class to the .cd-main-content, we switch the position of all those elements to Fixed.

Another thing worth mentioning is the .filter-is-visible class. It is applied to several elements when the user fires the filter panel. On all devices it’s used to modify the translateX value of the .cd-filter element (from -100% to 0). On bigger devices only (>1170px), we target also the .cd-gallery and .cd-tab-filter, and we reduce their width: this way the panel won’t overlap the content, and the user takes advantage of the additional space to apply filters and see changes simultaneously, with no need to close the panel.

Events handling

To implement the content filter functionality, we integrated the jQuery plugin MixItUp. To initialize the plugin on the gallery container, we use the mixItUp() function and declare the buttonFilter variable to contain all filter custom functionalities.
Besides, we use jQuery to open/close the filter bar and fix it (along with the tabbed navigation) so that it’s still visible while scrolling through the gallery.


Jan 15, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Merqurio

    Wow, this is amazing !! I didn’t knew about MixItUp, It’s a great alternative to !!
    Thanks for all this projects !

  • Bryan Rojas

    Hi Sebastiano and codyhouse guys. I’d like to thank you and congratulate for this site and share amazing snippets. I really love your designs, I’m developer and codyhouse has given me inspiration.

  • Sebastiano Guerriero

    Thanks a lot for your kind words fellas!

  • Hisham Abdul Majeed

    @Sebastiano Guerriero Wonderful stuff , just what i needed today , I check your rss everyday

    BTW , how did you make those awesome social share button ? Can you make a short article on it ? Thanx in Advance

  • Andrew Dotson

    Nice work! Great as always!

  • Paskainos

    Wow Sebastiano, that is seriously impressive! Once again, you’ve outdone yourself – and raised the bar to stratospheric heights. :-)

  • MojoDK

    Looks good! It needs a “Reset” button to revert search filter.

  • Alexey

    @Sebastiano Guerriero You are gaze upon my very thoughts!!! Thank you!!!

  • Robin Bruinsma

    @Sebastiano Great work jet again!, i really love the snippets you guys at CodyHouse make.
    Keep rocking them :)

    One little notice for people who want to use this. The version of MixItUp used is 2.1.7 which means that for commercial use u need to purchase a licence over at:

  • Braunson

    This is absolutely wonderful.

  • Borko Savić

    Great article. Is it possible to implement pagination?

  • Richard Nash

    this is cool. what would need to be done to componetize this design? Has your team thought about creating web component versions of your examples?

    • Sebastiano Guerriero

      we have, it’s def on the radar ;)

      • Richard Nash

        Great to hear Sebastiano. Hopefully they will help simplify selectors as well :-)

  • Ronnie_Gardocki

    I’m sorry if i’m being rude, but what the point of demo where you just using some plugin? :(

    • Sebastiano Guerriero

      The plugin is just part of the resource. All the structure with the slide in panel, the custom form elements, the resizable gallery etc can be used with a custom back-end (or another plugin as well)

      • SummerLover

        So we can use the options of MixItUp and their extensions (pagination) ?

        • dom_1080

          Did you ever have any luck with this?? I’ve bought the extension and am really struggling

          • sean

            who get the answers of pagination.

  • cardeo

    Great component, Best solution to multiple filters I think I’ve seen

  • swizenfeld

    Usually if you need filters you also need pagination, and multiple options for filtering so the user can get to the exact result they specified and not go through everything. is there a way to add those 2? pagination and multiple category filters

    • SummerLover


  • SummerLover

    Wow, nice work, please please help me to add your awesome feature of “quick view” : to the items of this grid

  • Guest

    Really brilliant work, I have some issue when I using in other project.
    Filter is working, but the item is always visible. It have scale animation but still there.

    have any possible that some part of JS I missing~?

    • Claudia Romano

      Be sure you include the css file (you have to assign a display: none to the items for the filter to work properly)

  • Sohail Shahid

    Really Great Work :) I’d like to thank you and congratulate for team to share amazing stuff.
    Thank you!!!

  • Zaid Erikat

    Great Work I really love it.

  • Ahmad Awais

    Great work guys!

  • alam

    Hi, I want to 6 image in one row, can u help me… how

    • Claudia Romano

      You can change the width of the list items!

      • alam

        Dear Sister for help.
        really great work,
        thnx again

  • Dom Bonham

    Anyone have any luck working out Pagination? And Sebastiano your website is a constant source of inspiration!! Thank you

  • Alexey

    @Claudia Romano Hello! I have an issue with a footer and fixed navbar. Please add a footer to example. Thank you!

  • Karol

    Dear @Sebastiano Guerriero, it is possible to select any filter in this plugin by URL? E.G. I would like to link to choosen results.

    Cheers, Karol.

    • Richard

      // check if there is a url hash, and if so,
      // save it as a variable and prepend a ‘.’ to the start – e.g. ‘.blue’
      // else, set variable as the default “all”

      var filterOnLoad = window.location.hash ? ‘.’+window.location.hash : ‘all';

      // Send variable to MixItUp on instantiation:

      load: {
      filter: filterOnLoad

      • Karol

        Dear Richard, thank you for your reply. I don’t know why but it isn’t work correctly for me. I’ve added this function in after js/main.js load. When I’m putting #color-1 in url nothing is changing. I hope you could help me. Thanks.

        • Richard

          Hi Karol,

          Sorry try this:


          var filterOnLoad = window.location.hash ? ‘.’+(window.location.hash).replace(‘#’,”) : ‘all';

          $(‘.cd-gallery ul’).mixItUp(‘filter’, filterOnLoad);


          after the main.js

          The hash needed taking out for it to work properly

          • Karol

            Richard, it is working in your example? In my doesn’t. :-/

          • Richard

            Karol, I have uploaded it for you


            the script I have added to the end of the main.js


          • Karol

            You’re awesome! Thanks! It works perfect! Thank you again!

          • Sebastian Harder

            Could you share the updated main.js? The link above is broken.

          • SummerLover

            Opening the filter sidebar rest the filter I encounter this issue also when I tried to implement the pagination, once the filter bar is opened the page and filters reset, can you please provide a solution to prevent that the opening of the sidebar reset the filter

          • Sebastian Harder

            Is this still available?

  • alam

    How to add Random data filter button.

  • alam

    can i use my youtube video..?

  • Mohammad Faizan Atiq

    Firstly great work and effort loved it. But this will only search for values with a discrete word. How about if we want to search for an sentence if it has spaces in them! I would really appreciate if u could shed some light on it.

  • Jessie Matanky

    The filter menu should have a “Clear All” button :)

  • Tuấn Phong Trương

    can i use my wordpress page

  • Mahesh

    Amazing work!!! But I feel the search is not working in Mobile (Chrome browser). Can you please check?

  • Gregoire Dierendonck

    Hi @Sebastiano Guerriero ! Thank’s a lot for this amazing work… :)
    The tool is pretty great, but add an important bug, or am I wrong ?

    When you choose more than 1 options in the checkboxes, the “color” filter don’t work anymore…
    Is there something to fix it ?

    Thank’s a lot for your help.

    • Gregoire Dierendonck

      Has anyone the same problem as I am ?
      I don’t know how to fix it… :/

      • Heidi Pungartnik

        I can reproduce this bug, but don’t know how to solve it.

      • mcmayank

        Hey Gregoire,
        The reason that you are seeing the box labelled 2 is because its also associated with ‘option2″ check box. Easiest solution would be to remove the class name from the html.

        • Gregoire Dierendonck

          Thank’s a lot for your answer @mcmayank:disqus

  • Mahesh

    Can anyone please help me how to make search to show result only after hit enter? (or ‘Go’ in mobile)

  • Luke McCann

    This is a great tool!

    Can anybody help me figure out how to load the page with the filters already open? Cannot seem to figure this out on my own.

    Thanks in advance.

  • Sam

    Would be nice if the search tool searched from a data attribute, e.g data-name. Not just a class.

    • Sam

      Just add the data attribute to the list item and on line 110 of the main.js change the attribute “class” to your data value. Worked for me!

      Hope this helps anyone with the same issue.

  • sahil Popli

    Hey Sebastiano,

    I have using this in my next project. which is basically a news reader from an XML source (not RSS).
    I have succeeded in getting news and filters from XML on document.ready event.
    but filters stops working after that it only works when it is hardcoded in HTML page.
    Please help.

  • Orest Hazda

    Why do You add class ‘filter-is-visible’ to three different block? Wouldn’t be better if add it to main container ‘cd-main-content’?

  • Andy Waller


    I’m having an issue with compatibility with bootstrap.js. When I load the bootstrap file before jquery, I lose some functionality (e.g. button won’t collapse content using data-toggle=”collapse”). When I load bootstrap.js after jquery, I regain the function of the button, but the content filter stops working (all the options are listed, no matter what is checked).

    Is this potentially an issue with conflicting classes, or am I missing something?

    • Claudia Romano

      Hi Andy, have you tried checking your console to see if there is a Javascript error or conflict?

  • David

    how do you change the width of the boxes???…I cannot find where the size of the boxes (or the number of boxes per row) is being designated

    • Claudia Romano

      Hi David, you can change the width of .cd-gallery li items.

      • Deyson

        Thank you Claudia. :)

  • Godofredo

    Hi, I want to change the gallery by to output content. With width:100% I manage to fit the when resizing, but I can’t fit the height. Shall I fiddle with jquery mixitup? Or shall I chage by other tag? Any idea please? :-)

    • Claudia Romano

      Hi, did you try height: 100%?

      • Godofredo

        Hi Claudia, thanks for your suggestion. hides the image (height==0px). For the moment I’m giving all a fixed height of 200px, but this reduces the mixitup “magic” ^_^

  • rirock

    Is it possible to implement it in woocommerce?

  • swizenfeld

    I am trying to make the filters appear on the right, i floated the gallery left, move everything else to the right but for some reason the filters make the page slide horizontal. I could fix this with overflow hidden on the body but I was wondering if there is a better way of getting around it.

    Any help would be appreciated Great job btw.

    • Claudia Romano

      Hi, I think it would be better to give an overflow-x: hidden to the rather than to the body (not sure it works, but it should!).

      • swizenfeld

        you are right, that makes more sense and it worked.

        The only other thing im having issues with is to have the filter link to toggle the off canvas so on click on, second click close.

        thank you for the help

  • Momo

    Hello. I want to know what to do that when the filter input loses focus, the filter is not disabled. Thanks

  • waseem azhar

    It’s been great i was finding such filter on other websites this one is made greatt.. i will use it on my site

  • jack heeney


    Awesome design and great responsibility i have used this content-filter template but i would really like to have the filter area that pops out from the left to be fixed and not able to close or open but just be open all the time.

    Is this possible?? And how would i go about doing this?


  • Denis

    Great job on the plugin!

    I have a problem.. when i click on any of filters, page goes to home page. And there are no errors.. Any help would be appreciated.

  • Daariush

    When I use MixItUp with Bourbon Neat, my grid (which has omega) breaks up and the some of the items margin breaks! Any help? thanks

  • deuce123

    this is great . . . I’m having a problem with conflicting jquery, any help troubleshooting would be greatly appreciated . . . thanks again super slick look and useability :)

  • zimutes

    hey there. How do i make the filter side bar an horizontal one?

  • akis

    Hello guys ! :) Great work Thank you so much!!

    I have combine 2 plugins together and I want some help because I’m losing my mind over here :p Basically I have combine content filter (your code ) with lighbox 2 ! Everything is work fine except two things

    a) I can’t center the images – seems like something from user agent stylesheet blocks my entire code ! I even used a custom table and separately gallery section from the main table in order to center the table but nothing still is not center. I can’t fixed it I did almost everything a hand of help please :) !

    b) if I fixed that I will probably fixed the problem a, I don’t want to use 4 blocks(images) per link I want only three I will convert the code in wordpress and my theme doesn’t have enough space to place 4 image. I have rezise the images and I’m using thumbnail 250×250. There must be something which I can’t determine and give us a chance to decide the number of blocks any ideas ?

    Thank you

    • akis

      problem b: fixed! ;)


      .cd-gallery ul {
      text-align: justify;
      width: 50%;

  • zimutes

    Hey there.
    Is there a sneaky way to keep all the filter options closed by default when you open de filter sidebar?

    • akis

      if you don’t want filter just delete it !

      • zimutes

        Thanks for the replay.
        I don’t want to delete the filter, I just don’t want all the options of the filter displayed by default when the user comes.




        When you go to my page, and open the sidebar to access filter results, the many filters (like the above AAAA) are already open, displaying the options “Option1″ and “Option2″ for the user to select.
        Althugh it’s ultimately a detail, I’d like for the AAAA (the cd-filter-block title) to be closed, not displaying the options. I messed around in the javascript file, to no avail.


    • Claudia Romano

      Hi Zimutes,
      try adding the .closed class to the h4 element (in the index.html file) and a display:none to the .cd-filter-content (in the style.css or style.scss if you’re using sass). That should work!

      • zimutes

        thanks, the display=none in the cs-filter-content class nailed it ;)

      • zimutes

        by the way, how can I make the sidabar fixed (as in, when you load the page it’s already opened)?


  • Range soft

    i want to put that filter in right side what should i do

    • Range soft

      plz check this link i have put the filter on right side but it is not responsive can any on fix it

      • swizenfeld

        instead of doing left: 80%; do right: 0; on .cd-filter

        • Range soft

          thanks for the reply .if can see that link its not responsive

        • Range soft

          its not resposive

  • Matt Henry

    I see that MixitUp has an option to sort by an attribute. Does this functionality exist in the Content Filter? If so, how do I use it? Thank you!

  • disqus_YmFtG8Ijlz

    I see that MixitUp has an option to sort by an attribute. Does this functionality exist in the Content Filter? If so, how do I use it?

    • Anselm Urban

      Same question.

  • Ana

    Thanks for the plugin! I have a question about adding more filters. I was able to add them and they work. But it does not allow me to click through the filters. I have to refresh the page or click all in order to sort by one of my new filters. How can I click between the new filters I added?

  • Yuliia

    Hi, thank you for this filter, I have one question, how can I make it work on WordPress?

    • Gordon

      I did. Copy files to your template folder.
      Just create a page referring to a php-template file (rename the content-filter.html to php and add // template name: ). Add all the needed included and globals and change the urls to the js and css files accordingly to you your folder structure. You should be good to go.

      • Jordan Khan

        Hi Gordon, I get the general concept of what you described here but would you mind being a little more detailed? I would really appreciate it. I need this content filter for my new site being built on WordPress. I’m an intermediate user but I do need a little more guidance on this.

        Thank you.

        • Gordon

          What part can I outline more?

  • Riba

    In this sample, how to do the “” bring your information from a database? And the Filters also works

  • Gordon

    Huge compliments with this code, works great. Just one question, maybe it’s answered already but did not recognize it: can I start with hiding the results (‘no results’), and showing only results when selecting any filter?

    • Claudia Romano

      Hi Gordon, glad you like it!
      I suggest you give a look at the MixItUp documentation! The load method should do the trick:
      You should try filter: none! Hope this helps

      • Fooshie

        Is the filter:all already defined in the files? i have tried finding it but no luck.
        And will I need to change it to be:

        load: {
        filter: ‘none’

  • Godofredo

    Hi, great layout. I have been using since some months, substituting by and adding some text in there. Now I have integrated dotdotdot, which works great at first load… but I can’t trigger it properly when the filter panel is shown. the initial call is OK, but the .on(‘click’, …) event does not rearrange the code. Do you know where can I call .dotdotdot()? Thanks :-),17,18,19,20,218,219,220,221,222,223,224

    • Godofredo

      I have managed to get the full dotdotdot effect along with this great content filter. I just had to pass the parameter watch to the dotdotdot initial call:

      $(document).ready(function() {
      $(‘#MixItUp’).find(‘> li.mix > div.grid-square’).each(function() {
      watch: $(this)

      Once again, thank you!

  • Anselm Urban

    Absolutely great! Check out what I have built with your Content Filter:

  • Samuel Rengassamy

    Hi, just started with it, modified a lot of things to display some tables.
    Works perfect !
    But there is my question :
    How do you display the form horizontally ?
    I mean, i searched a lot but i didn’t find anything that could help.

    I will display it horizontally only on web desktop.
    It works in jQuery, so some options aren’t available in the style.css, like cd-filter is visible.

    Thank you for your help

  • Fooshie

    Hello, Love the filter! I do have a question though, is it possible to show which filter is applied with a tag at the top of the page? And is it possible, to dynamically change the load: filter depending on a user selection?

  • Riba

    There is a way to load more than 300, 400 entries without make the html heavy?

  • Jordan Khan

    This looks amazing. It’s EXACTLY what I need for my project. However I only use WordPress. How would I go about integrating this? How difficult would it be? I’m an intermediate WordPress user.. if it requires specialized knowledge how much would it cost to hire a developer to do the job?

    Anyone please reply! Thanks

    • LiorGoldenberg

      Having the same question. Would love to get an explanation and if someone can post a live website example of this working on WP ?
      will it be easily done to make the content in this dynamic , ready from the DB per the change done there ?

      • Stephanie Bertha

        It will be easily done if you use the Advanced Custom Fields plugin!

    • Stephanie Bertha

      You would need to set up a Page Template or do an if statement in PHP, then add the code in there. It would be a bit involved. A good developer should be able to set this up for you in 2 hours.

  • David Panzarella

    @seguerriero:disqus Is there an easy way to implement this so that the filter was not set to a full-container on desktop or tablet views? E.g. If the container was say the standard Bootstrap 1170px wide. Of course on tablet portrait or mobile layouts we’d want the off-canvas functioanlity, but just curious to see how you’d handle it if it you had a constrained container.

    Thanks for continuing to put out awesome stuff!

  • Gordon


    I thought I had this done before but can’t figure it out anymore: what code to change for having the filter opened when loading the page?

    Many thanks!

    • Claudia Romano

      Hi Gordon, try adding, in the index.html file, the filter-is-visible class to the .cd-gallery, the .cd-filter and the .filter-is-visible. That should work!

      • Gordon

        Thanks Claudia, that did the trick!

  • fidan

    filter by the url hash send to me the code please :S

  • Epaudiolive

    Once again, you all have done a great job with this. When the lists are rather long, is there a way to make the page jump back to the top of results when items in the are clicked. This is particularly necessary when using mobile. Thanks.

  • Algonzo Crypton

    Alguien ha logrado integralo en Angularjs, yo estoy intentandolo pero no he podido, y si alguien ya lo hizo, podría dar algunos tips de como lograrlo, gracias.

  • Gordon

    Hi Sebastiano and Caudia,

    When opening the page and then scrolling down the page, the entire filter block moves to the left. Scrolling to the top of the page brings the filter block to its orginial position. Is this intended to do so or how can I fix the position of the filter block when scrolling down the page?
    Many thanks!

    • Gordon

      Got it already, removed the is-fixed class when scrolling in main.js

  • Richard

    Hi, nice job, but i have some problems…

    i changed width of gallary items..

    .cd-gallery li {

    width: 11%;


    I have 20 items , but the third line I get a smaller distance between the items , than the first two

    why? I can not understand..

    Can you help me ?

    How can i Fix?

    • Claudia Romano

      Hi Richard, make sure to add the right number of elements (according to your new structure), as explained in the ‘Creating the structure’ section. That should fix it!

  • Arpit Sancheti

    Hi, guys, first of excellent work,
    i want to know how can i get filtered item when i load some item on scroll

  • Cornelius Williams

    Thank you for this wonderful filter!

    I’ve been trying to add approx 10 items to the tab-filter, however I try tweaking it – the items shift to the right and is not visible on screen. Is there a way to make it responsive or even to create an overflow of the items into a new line of the same ‘tab-filter’ bar? Tnx.

  • Thomas Schönling

    Thank you for this wonderful filter script! It’s really fantastic.
    I want to use this script as a product filter. On the right side are the product groups (for example “bread”, “bun”, etc.). In the left drop-down menu are exclusions. For example, allergens. If you select an allergen in the checkbox (for example “egg”, “soy”, etc.) the products that contain this allergens should be hidden in the products selection. Is this possible with the script? What can I customize here? Many tnx. for a tip. Thomas

  • Lawrence

    I really enjoyed what you have been doing with this feature.
    I’m having some strange behavior with the filtering
    It was all working fine localy, I sent to server and wasn’t working anymore…
    I downloaded the source code from your demo to make things clear
    I hadded my code, it all looks the same as yours, but filtering is working with your and not with mine, I can’t understand why…
    Thanks in advance for your help

  • AnneG

    Awesome plugin! It works beautifully on my desktop, however on both tablet and smartphone it breaks down. I can click one filter tab and then none of the others work. Any ideas? I’m trying to finish this website for my company so I would be willing to hire in order to fix this quick. This feature is the meat of our new website. Thank you in advance!

  • Jonathan Ychovsky

    Hi, there is a way that the content filtering not disappear, but instead appear with low opacity. Thanks

  • aameena

    Hi, I am using this filter but it is not working for diiferent height of images , i want to make this work as isotope kindly help mw in this

  • voltan


    how i can add pagination support here? I want add about 400 or 500 products on my project and use this filter , but pagination is needed


      Hi there,

      a pagination solution or infinite scroll would be very helpful!
      Thank you for the great tutorial.


  • ohmywp

    Hi, Great Work! How can we fix the Content area “product thumbnails” fixed? So when scrolling to bottom for more check box option products will be visible everytime? Thank You

  • Prathamesh Mantri

    This is fucking awesome!!! I am loving it!!
    I am gonna use it with due permission of yours!!

    Please let me use it!!

  • Patrick Vu

    This is an amazing tool and much appreciated. Very straight forward. Can I ask… is there a way to display separate filters for each top level category? Maybe a show/hide function that’s dependent on top level category chosen?

    • Alex Bunt

      You could always use a bit of jQuery to hide and show input fields depending on the value of another.

      if ($(‘#primary’).is(‘:checked’)) {

  • nick martin

    This looks amazing. It’s EXACTLY what I need for my i can add pagination support here in this Content Filter

  • Sibi Mathew

    Hello How can i keep the filter tab always open. I mean i would like to keep the filter tab open when page loads. help expected. thanks

  • Florian Smp

    Hello , I need help. I would like to add other filters to the gallery but it does not work well . How to do ? Thanks

  • Kv

    This is Great. Thanks. Was wondering, if i replace the image with Div, is there anyway i can toggle between card view and List view? Would love to have card view but for lot of results, list view is mandatory. I can see that in mix it up but can make it work here.

    • Ricardo Merino

      You can set the width of the element to 100%, you could do that with a class that could be set to the parent element and the action item with jQuery to toggle the class. That should do the trick!

  • Damian Smith

    This is amazing, thank you very much.
    I can’t figure out why the filtering by search input is cleared though after I close the filter menu?


  • Marjonh Davin

    it’s been 1 year i think when i see this content-filter of yours. i’m dying to implement this into my site . but now i just finally implemented of one of my site . and it’s perfect !. thank you so much guys =) your the kind of people who deserves a crown =) but i have one tiny question, can i replace the filter icon svg into font icon ? =) thanks big up ! =))

  • Jenkins4P

    Hi, it’s great component! However when something is written in the search input field, it does the filtering perfectly but when I click on the filtered items or anywhere else basicly, the search gets reseted. You can see the problem on the demo too. Can you do something for it? Thanks!

  • chandrasekhar

    Really awesome coding…. you are helping to many members

  • Alexander Hermann

    I gess there is al logic fail in the filter function with checkboxes. When I select color-2 and all 3 options, the result includes items of color-1. Im a bit confused that no one postet this issue since the release. But I am pretty sure this is not, how a filter should work, or is there a logic fail in my point of view?

  • Мухамед-Канапия

    Hello guys i need help http://ричлайф.рф/kvartyry.html . on this page when i try select one filter tag all items disappear and just shows

    No results found -Ничего не найдено

  • julienlapointe

    Does anyone know the purpose of the “check1″ and “check2″ classes?

  • jeroen brevet

    How to solve the noConflict problem at init: function(){

    I get this error $ is not a function. (In ‘$(‘.cd-main-content’)’, ‘$’ is undefined)

    I load the code in wordpress

  • Robb Bennett

    Great plugin! Is there a way to start with a category other than “All”? My navigation doesn’t use “All”


  • IrvingChen

    hi~ This is an amazing filter plugin!

    I have one question, how do I change the filter way from “A or B” to “A and B” in this plugin’s section : check box options……..

    the printscreen as the attachment :

  • Camille Trizia Nodado

    This is a really great plugin. I really need help on adding the sort by feature. I’ve tried a hundred times but can’t seem to implement it.