Collapse exposed filters

I've implemented this separately in hook_form_alter() by moving the exposed filters inside a collapsible fieldset - I could patch into BEF module if the maintainer(s) thought it would be a good addition?

I always welcome patches, though I'm about half way through adding this feature.

But you're welcome to race me... *smirk*

I should warn that HEAD has been getting a few much-needed changes so make sure you're on the latest.

Thanks!

I've added this for the Views 2.x and 3.x version of BEF.

In both cases, this change included a refactoring of how the exposed filters were rendered. In particular, the bef-select-as-checkboxes and bef-select-as-radios classes were moved to elements much closer to the actual checkboxes/radio buttons. This is how it should've been done in the first place. Unfortunately, this change will affect CSS and JS that depends on the previous hierarchy. I'll be adding some more information to the docs about this change.

The collapsible filter is rendered as a standard Drupal collapsible fieldset. It's closed by default. If any of the options in that filter have been selected, then it's opened. I was concerned about making the exposed filters options dialog more muddy than it was if I offered the option to set the fieldset as collapsed or expanded by default. Please open a separate issue if you feel this option is important.

Give the latest -dev release a try.

Oh... Beat you to it, Eli-T! *smirk*

So, I'm using exposed filters in Views with two taxonomy:term id with depth filters. I would love the collapsible functionality since my lists are heirarchical and have 100+ items.

But I tried the latest dev version of BEF and when I click the "collapsible" box in Views, the list of terms disappears from the page. The label is still there, but no checkboxes, no list, nothing.

When I leave the "collapsible" box unchecked, the list of terms with checkboxes show up fine (but it is a mile long).

Thanks for working on this - it's a great project.

---Update---

Instead of using taxonomy:term id with depth filter, I used Content:___ field that pulls terms from a Content Taxonomy Field I set up and now the collapsible option works, but I still have a question (see post below).

Is there a way to collapse/expand according to the hierarchy?

I have a hierarchical vocab with a depth of 3 or 4 and there are only a handful of parents and children but over a hundred grandchildren.

So it would be great if not just the root, but also all the sub-parents could be collapsible/expandable as well (like in the interface of Taxonomy Manager). Is this possible?

Disregard the attached picture. I can't figure out how to delete it.

jadenoel: I'm guessing the issue mentioned @5 is a matter of not having a label set for the exposed filter. If there is no label, then there's nothing in the fieldset to click on to expand/collapse it. Anyhow, I'm glad you were able to get around the issue using Content Taxonomy fields.

As to expanding/collapsing large hierarchical taxonomy filters (@6), that's a problem I've been struggling with as well. However, it's best brought up in a separate issue as this one is specific to expanding/collapsing the filter itself, not the contents within the filter.

(Suffice to say that when I last looked at it, it wasn't an easy thing to make Taxonomy Manager's tree structure work with exposed filters...)

Thanks.

@4 Hey Mike - sorry, I've been mainly painting my flat in meatspace so not had time to contribute. Nice to know great minds think alike though :)

This doesn't seem closed or fixed and it looks like there is still interest.
I'd love to output BEF checkboxes from taxonomy with hierarchical DOM for some simple jQuery accordion scripts.
This would probably also be nice just for better nesting with padding and other style cues.
(added PHP tags just for easier reading with highlighting.)

So rather than...

<div class="form-checkboxes bef-select-as-checkboxes "><div class="bef-checkboxes">
<div id="edit-where-1-wrapper" class="form-item">
 <label for="edit-where-1" class="option"><input type="checkbox" value="1" id="edit-where-1" name="where[]"> Washington</label>
</div>
<div id="edit-where-3-wrapper" class="form-item">
 <label for="edit-where-3" class="option"><input type="checkbox" value="3" id="edit-where-3" name="where[]"> -Seattle</label>
</div>
<div id="edit-where-31-wrapper" class="form-item">
 <label for="edit-where-31" class="option"><input type="checkbox" value="31" id="edit-where-31" name="where[]"> -Bainbridge, Bremerton, Port Orchard</label>
</div>
<div id="edit-where-27-wrapper" class="form-item">
 <label for="edit-where-27" class="option"><input type="checkbox" value="27" id="edit-where-27" name="where[]"> -Bellingham</label>
</div>
<div id="edit-where-28-wrapper" class="form-item">
 <label for="edit-where-28" class="option"><input type="checkbox" value="28" id="edit-where-28" name="where[]"> -Mt. Baker</label>
</div>
<div id="edit-where-26-wrapper" class="form-item">
 <label for="edit-where-26" class="option"><input type="checkbox" value="26" id="edit-where-26" name="where[]"> -Olympia</label>
</div>
<div id="edit-where-30-wrapper" class="form-item">
 <label for="edit-where-30" class="option"><input type="checkbox" value="30" id="edit-where-30" name="where[]"> -Port Angeles, Sequim</label>
</div>
<div id="edit-where-25-wrapper" class="form-item">
 <label for="edit-where-25" class="option"><input type="checkbox" value="25" id="edit-where-25" name="where[]"> -Tacoma</label>
</div>
<div id="edit-where-29-wrapper" class="form-item">
 <label for="edit-where-29" class="option"><input type="checkbox" value="29" id="edit-where-29" name="where[]"> -Whidbey Island</label>
</div>
<div id="edit-where-2-wrapper" class="form-item">
 <label for="edit-where-2" class="option"><input type="checkbox" value="2" id="edit-where-2" name="where[]"> Oregon</label>
</div>
<div id="edit-where-22-wrapper" class="form-item">
 <label for="edit-where-22" class="option"><input type="checkbox" value="22" id="edit-where-22" name="where[]"> -Portland</label>
</div>
<div id="edit-where-23-wrapper" class="form-item">
 <label for="edit-where-23" class="option"><input type="checkbox" value="23" id="edit-where-23" name="where[]"> -Eugene</label>
</div>
<div id="edit-where-19-wrapper" class="form-item">
 <label for="edit-where-19" class="option"><input type="checkbox" value="19" id="edit-where-19" name="where[]"> Canada</label>
</div>
<div id="edit-where-20-wrapper" class="form-item">
 <label for="edit-where-20" class="option"><input type="checkbox" value="20" id="edit-where-20" name="where[]"> -Vancouver</label>
</div>
<div id="edit-where-21-wrapper" class="form-item">
 <label for="edit-where-21" class="option"><input type="checkbox" value="21" id="edit-where-21" name="where[]"> -Victoria</label>
</div>

You would need...

<div class="form-checkboxes bef-select-as-checkboxes">
<ul class="bef-checkboxes hierarchical">
  <li class="level-1">
    <div id="edit-where-1-wrapper" class="form-item header">
     <label for="edit-where-1" class="option"><input type="checkbox" value="1" id="edit-where-1" name="where[]"> Washington</label>
    </div>
    <div id="edit-where-3-wrapper" class="form-item">
     <label for="edit-where-3" class="option"><input type="checkbox" value="3" id="edit-where-3" name="where[]"> -Seattle</label>
    </div>
    <div id="edit-where-31-wrapper" class="form-item">
     <label for="edit-where-31" class="option"><input type="checkbox" value="31" id="edit-where-31" name="where[]"> -Bainbridge, Bremerton, Port Orchard</label>
    </div>
    <div id="edit-where-27-wrapper" class="form-item">
     <label for="edit-where-27" class="option"><input type="checkbox" value="27" id="edit-where-27" name="where[]"> -Bellingham</label>
    </div>
    <div id="edit-where-28-wrapper" class="form-item">
     <label for="edit-where-28" class="option"><input type="checkbox" value="28" id="edit-where-28" name="where[]"> -Mt. Baker</label>
    </div>
    <div id="edit-where-26-wrapper" class="form-item">
     <label for="edit-where-26" class="option"><input type="checkbox" value="26" id="edit-where-26" name="where[]"> -Olympia</label>
    </div>
    <div id="edit-where-30-wrapper" class="form-item">
     <label for="edit-where-30" class="option"><input type="checkbox" value="30" id="edit-where-30" name="where[]"> -Port Angeles, Sequim</label>
    </div>
    <div id="edit-where-25-wrapper" class="form-item">
     <label for="edit-where-25" class="option"><input type="checkbox" value="25" id="edit-where-25" name="where[]"> -Tacoma</label>
    </div>
    <div id="edit-where-29-wrapper" class="form-item">
     <label for="edit-where-29" class="option"><input type="checkbox" value="29" id="edit-where-29" name="where[]"> -Whidbey Island</label>
    </div>
  </li>
  <li class="level-1">
    <div id="edit-where-2-wrapper" class="form-item header">
     <label for="edit-where-2" class="option"><input type="checkbox" value="2" id="edit-where-2" name="where[]"> Oregon</label>
    </div>
    <div id="edit-where-22-wrapper" class="form-item">
     <label for="edit-where-22" class="option"><input type="checkbox" value="22" id="edit-where-22" name="where[]"> -Portland</label>
    </div>
    <div id="edit-where-23-wrapper" class="form-item">
     <label for="edit-where-23" class="option"><input type="checkbox" value="23" id="edit-where-23" name="where[]"> -Eugene</label>
    </div>
  </li>
  <li class="level-1">
    <div id="edit-where-19-wrapper" class="form-item header">
     <label for="edit-where-19" class="option"><input type="checkbox" value="19" id="edit-where-19" name="where[]"> Canada</label>
    </div>
    <div id="edit-where-20-wrapper" class="form-item">
     <label for="edit-where-20" class="option"><input type="checkbox" value="20" id="edit-where-20" name="where[]"> -Vancouver</label>
    </div>
    <div id="edit-where-21-wrapper" class="form-item">
     <label for="edit-where-21" class="option"><input type="checkbox" value="21" id="edit-where-21" name="where[]"> -Victoria</label>
    </div>
  </li>
</ul>
</div>

The parent term would need to get a header class to act as the accordion parent. Imagine for deeper term hierarchies, you'd want to throw the level classes in.

Suppose I could just write a version of theme_select_as_checkboxes in my theme, but this seems like a wider needed thing.

See #990080: Collapse and Expand according to Hierarchy.

I should point out that the original issue here was collapse/expanding ANY filter within a fieldset while #990080: Collapse and Expand according to Hierarchy is about adding HTML structure around a taxonomy filter with hierarchy.

Sounds like this was already handled #990080: Collapse and Expand according to Hierarchy

Still won't be collapsible when the filter's displayed as links. Works when it's displayed as either Default select list, Checkboxes/Radio Buttons or Nested Checkboxes/Radio Buttons

@#14: Please open a separate issue for that. Thanks.