Dynamic filter bar using tag links in tumblr - dynamic

Question

I have 10 links to 10 TagPages, when clicked they take you to a page with all the posts with that tag.
That’s easy enough.
I’d like to know if its possible to stack more than one tagged post in a page. For example when all the “red” tagged posts are showing you can click and load in the “blue” tagged posts without leaving the page.
The 10 links then behave like a filtering system. You can then show any combination of tagged posts in one page… click once and load them in, click again to hide the posts.
I hope that all makes sense.
Any help would be great. Thanks.

Answer 1

You can load in posts by tag with Tumblr's API: http://www.tumblr.com/docs/en/api/v2#posts
The call for each of your tags would look something like this (square brackets marking areas you'll need to change):
URL = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=?
$.ajax(URL, {
type: 'GET',
dataType: 'json',
success: function(data) {
// do something with your data
}
});
Updated with a more specific example:
You'd need to create a function for each click of your tag navigation. So let's say you built out your navigation in simple HTML, you'd want to create a function for each of those clicks.
HMTL:
<nav class="tag-nav>
<ul>
<li>Portrait</li>
<li>Landscape</li>
</ul>
</nav>
JS:
$('.tag-nav a').on('click', function (e) {
e.preventDefault();
// grab classname from the link that was just clicked
var tagName = $(this).attr('class');
// go get our tagged posts
getTaggedPosts(tagName);
});
var getTaggedPosts = function (tag) {
// this is where your AJAX call will go
// bonus points if you check to see if you've already made the AJAX call
// and stored the posts somewhere else on the page
};