I need to create a Tree View Menu with checkboxes, showing values taken from the database. I want to use the Collapsible Checkbox Tree. A demo of the jQuery plugin is available here.




2 Answers 2


If this is a listing of taxonomy terms, you could giva a try to the Term Reference Tree module. At any rate you could just carefully theme a view, tossing out all markup that is unnecessary or even could mess up with jQuery plugin.

enter image description here


It depends on what the tree is for. I don't know of a versatile all round module that just works that turns any type of Drupal-generated <ul> or <ol> into a tree, but individual use cases for trees have their own modules. Artur's mentioned Term Reference Tree for taxonomy, and Better Exposed Filters supports javascript tree plugins like you mention for Views exposed filters (though it's not quite as simple as just working out of the box).

For other cases, like checkboxes in content body, etc, most javascript tree plugins are actually pretty easy to implement in Drupal the normal way. Usually you just need to make sure that the <ul> or <ol> has a certain class (Views etc have options to give content classes, and most Wysiwyg editors have optional dropdown menus of classes you define that can be added to inline content), and then, in custom javascript in your theme (e.g. scripts.js) select that class in jQuery and run the tree library's function on it however they say in their document.

Normally, the only difference between the javascript code in the library's documentation and the javascript code you'll use on a Drupal site is that you wrap it in Drupal.behaviors instead of $(document).ready, so that it re-applies if Drupal updates a page. I can't find the specifics of the javascript tree library you mention (links just point to a design agency site?), but in Drupal 7 it'll usually look something like this:

Drupal.behaviors.yourtheme = {
  attach: function (context, settings) {

    // assuming the function is called 'tree' - check their docs!
    $('.some-class', context).tree({ 
      some: 'options',
      more: { 'options', 'go', 'here' }

  // do other things...


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.