Make a Views form collapsible

Question

I have a search form in my header. Instead of using the core search, I used a custom block that takes the search string and passes it to the Advanced Search page, built in Views, where users can further filter their results. That's working.

What I want to do is have the form fields collapsed by default, with some text that says "Filter Results" that when you click it expands to show the fields.

How do I do this?

Answer 1

I think that you can add a collapse widget based in Jquery. there are several tutorials on Internet.

I will use this guide http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/ to a fast adaptation of respective CSS rules and Jquery script to Drupal:

inside your html.php.tpl of your template (before </head> closing tag) you can add following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style type="text/css">
.layerToCollapse {
margin: 0;
padding: 0;
width: 500px;
}

.headingtoCollapse {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.contentToCollapse {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
</style>

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".contentToCollapse").hide();
  //toggle the componenet with class msg_body
  jQuery(".headingtoCollapse").click(function()
  {
    jQuery(this).next(".contentToCollapse").slideToggle(500);
  });
});
</script> 

and inside your views-exposed-form.tpl.php of your template directory, you can add the following divs (with respective closing tags) before <div class="views-exposed-form">

<div class="layerToCollapse">
<p class="headingtoCollapse">Colapse </p>
<div class="contentToCollapse">

... template code ...

</div><!--closing contentToCollapse div -->
</div><!--closing layerToCollapse div -->

was tested using Drupal 7.7 with template called Seven. Also remember that you can use (paste inside your template directory) the views-exposed-form.tpl.php located in .. > modules > views > theme. and html.php.tpl can be located in modules > system.

Answer 2

Just use some JavaScript to hide the div, similar to the following code:

jQuery(document).ready(function() {
  $('.view-filters').click(function() {
    $(this).next().toggle('slow');
    return false;
  }).next().hide();
});

Answer 3

Try use Better Exposed Filters, which supports field collapsing.