How to hide and show custom filter form on a drupal view

Question

I'm new to Drupal and I'm trying to create a view with many filter options, because it has a lot of filter fields I want them to be hidden and only show the filter fields the user decides he wants to see at a given time.

I couldnit find a module to get the said affect so i tried to use panels and add my own html and jQuery custom code:

HTML

<input type="button" id="filter-selection-toggle-button" value="show filters"/>
<div id="my-filter-selection">
    <input type="checkbox"  value="edit-field-1">field 1</input><br/>
    <input type="checkbox"  value="edit-field-2">field 2</input><br/>
    <input type="checkbox"  value="edit-field-3">field 3</input><br/>
    <input type="checkbox"  value="edit-field-4">field 4</input><br/>
    <input type="checkbox"  value="edit-field-5">Dimention</input><br/>
    <input type="button" id="filter-button" value="filters button"/>
</div>

jQuery:

<script type="text/javascript">
        // We define a function that takes one parameter named $.
        (function ($) {
            $(document).ready(function()
            {
                var showCheckedFilters=function(event)
                {
                    var x=$("input:checkbox:checked");
                    var y=$("input:checkbox:not(:checked)");
                    var checkedFilters="";//array of checked filters
                    var unCheckedFilters="";//array of checked filters
                    var toggleSpeed=event.data.toggleSpeed;

                    for (var i=0;i<x.length;i++)
                    {
                        checkedFilters=checkedFilters+"#"+$(x).eq(i).val()+","; 
                    }

                    for (var i=0;i<y.length;i++)
                    {
                        unCheckedFilters=unCheckedFilters+"#"+$(y).eq(i).val()+","; 
                    }


                    if (checkedFilters!="") 
                    {
                            // remove comma

checkedFilters=checkedFilters.substring(0,checkedFilters.length-1); $(checkedFilters+",.view-filters").show(toggleSpeed); } else // all are unchecked { $(".view-filters").hide(toggleSpeed); }

                    if (unCheckedFilters!="") 
                    {
                            // remove comma
                            unCheckedFilters=unCheckedFilters.substring(0,unCheckedFilters.length-1);
                            $(unCheckedFilters).hide(toggleSpeed);
                    }
                };

            // Now use jQuery with the $ shortcut again like you normally would

            $("#my-filter-selection,.view-filters").hide();
            //showCheckedFilters();//hide nondefault filters
            $("#filter-selection-toggle-button").click(function(){$("#my-filter-selection").toggle(500);});
            $("#filter-button").click({toggleSpeed:500},showCheckedFilters);
            //$("#edit-submit-items-in-market").click({toggleSpeed:0},showCheckedFilters);

           //to do on every reload of the filters
           $(document).ajaxComplete({toggleSpeed:0},showCheckedFilters);
        });
        // Here we immediately call the function with jQuery as the parameter.
        }(jQuery));
    </script>

All seems to work fine up until the drupal filter is actually used, apparently drupal reloads the filter fields using ajax and not only the content, at which point all the filters appear again.

In order to avoid this I tried capturing the ajax call using

$(document).ajaxComplete({toggleSpeed:0},showCheckedFilters);

or adding my own call to the drupal submit button:

$("#edit-submit-items-in-market").click({toggleSpeed:0},showCheckedFilters);

both to no avail.

So:

1. is there a way to make sure the unchecked filters stay hidden?

2. is there a better solution than adding the above html piece all together?

(note I'm not versed in the drupal api so sending me to change tpl files or creating a custom module is not a very good option).

Example:

filtered:

unfiltered (after pressing apply):

Answer 1

Can you be more specific about what you want to filter?

Anyhow, I think you should check this module - https://www.drupal.org/project/webform_conditional

You can also cancel ajax on the advance settings in the Drupal view