Help with filtering on button click

I would like to filter things on a page buy a comination of certain buttons clicked.

I have two theaters with different shows all displayed on one page. In the sidebar I have the two theater names and a list of months. What I would like to do is for the viewer to click on a theater name and it only displays that theatre's shows, and if they click on a month it displays only the shows for that month (by unpub date). If they click on another month it displays the shows for that month.

So if they enter the page and click Jan without selecting a theater, it will display all shows in january for both theaters. But if they click theater "A" then click Jan they only get shows in January for that theater.

I'm a designer and not really a coder and have looked at the folwing vid on YouTube. http://www.youtube.com/watch?v=Z4tJ5tXlmzE which looks similar but am struggling to understand it. Can anyone point me in the right direction to a simple solution? This is my first site in Modx Rev which is why I'm struggling.

If all your data is going to be one one page and you just want to filter what's already there (and not load additional data from elsewhere on click) then you could use Isotope. It's a plugin which is (reasonably) straight forward to set up. I use it here http://incb.us/

Try the filtering out on that page, you'll see what I mean. That page is only set at the moment to filter by one type, but it's possible to allow multiple 'tags' to be filtered with a bit more javascript.

Check out the site http://isotope.metafizzy.co/ - the commercial licence is $25, but it's free for personal use I believe.

I've also seen this: http://luis-almeida.github.com/filtrify/isotope.html which combines Filtrify and Isotope to do pretty much what you describe.

Hope this helps!

Hi pdincubus

That loooks just the job! I'll have a detailed look at that and post how i get on.

Many thanks