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?

3 Answers 3


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;
.contentToCollapse {
padding: 5px 10px;
p { padding: 5px 0; }

<script type="text/javascript">
jQuery(document).ready(function() {
  //toggle the componenet with class msg_body

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.

  • is important know that if you already have jquery running in your Drupal, then you must not call jquery again.
    – cigotete
    Oct 3, 2011 at 2:14

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

jQuery(document).ready(function() {
  $('.view-filters').click(function() {
    return false;
  • OK, so I don't really know much of java. I would give the div that wraps the form fields a class of 'view-filters,' right?
    – Mike
    Oct 2, 2011 at 23:07

Try use Better Exposed Filters, which supports field collapsing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.