Collapsing Folders with Taxonomy and Views_tree
One of our clients recently came to us with many product spec sheets that they wanted to make available on their website. Specifically, they wanted them presented in a collapsing folder view like in the file explorer or finder on a desktop. After thinking this through, I came up with a fairly clean solution. Using taxonomy to manage the folders and a content type to upload the field, I figured I could get a fairly clean system set up.
I knew that Taxonomy had a great hierarchy system built in but I wasn't sure exactly how to display this using views. After playing around for a bit, I created a view of taxonomy terms and created a relationship to the term's parent term. Then I added a relationship to all nodes that contained that term. This gave me all the terms in my vocabulary with all the files that had been attached to those terms.
The next thing I needed to do was format the output into a tree. Luckily there is a module for that called views_tree. It takes a "main" id and a "parent" id and will build the tree view for you. I set the main id to the current term id and the parent id to the term's parent term id. The tree more or less built itself at that point. I did need to tweak the recursive algorithm in theme_views_tree since it was duplicating the lowest level of the tree. The main thing of this was to rebuild the tree around the term id's with rows and children and then rendering the results as lists.
I then added a little css...
.folders h3 {
font-size: 1.1em;
padding: 0 0 0 20px;
margin: 0;
background-image: url(../images/folder.png);
background-repeat: no-repeat;
cursor: pointer;
}
.folders ul {
margin: 0 0 0 30px;
}
.folders ul li {
list-style: none outside none;
margin: 0 10px 0 0;
}
A little jquery magic...
Drupal.behaviors.folders = function (context) {
$('.folders ul', context).hide();
$('.folders h3', context).click(function() {
$(this).parent().children('ul').slideToggle(200);
});
}
And I had a nice little collapsing folder system run by taxonomy and views. Now the site administrators can manage the folders using a single taxonomy, adding folders and moving them around as easily as dragging and dropping them around. When a new spec sheet is added, they simple create a new spec sheet node and select the taxonomy folder where they want it to go. Works like a charm.
You can see the finished result here: Ulterra's Specification Sheets
I'm very happy with how clean this all turned out and how little hacking I needed to do to get it to work. Basically just tweaking the views_tree algorithm a little.
Anyone tried something like this before or found a better way of doing it?
