We usually display our latest tweets as an unordered list. However, when the number of tweets increases it often becomes difficult to keep tidy our page because of the vertical space occupied by our list. jQuery comes into rescue by allowing us to hide, show and collapse our tweets. Let's see how.
We'll use the standard Twitter widgets to display our tweets:
<div id="tweets">
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/gabromanato.json?count=5&callback=twitterCallback2"></script>
</div>
Now we need to create an object in order to handle our tweet list:
$(function() {
var TweetsList = {
};
});
First of all, we create a reference to our unordered list:
$(function() {
var TweetsList = {
ul: $('#twitter_update_list'),
// continues
};
});
Then we hide all our tweets except the very first one:
$(function() {
var TweetsList = {
ul: $('#twitter_update_list'),
hide: function() {
var context = this.ul;
$('li', context).not(':first').hide();
},
// continues
};
});
Next step is to generate a 'More' link:
$(function() {
var TweetsList = {
ul: $('#twitter_update_list'),
hide: function() {
var context = this.ul;
$('li', context).not(':first').hide();
},
more: function() {
var target = this.ul;
$('<a/>').attr({href: '#', id: 'more'}).text('More Tweets').
insertAfter(target);
},
// continues
};
});
Then our main method, which will collapse or reveal our items depending on their visibility status:
$(function() {
var TweetsList = {
ul: $('#twitter_update_list'),
hide: function() {
var context = this.ul;
$('li', context).not(':first').hide();
},
more: function() {
var target = this.ul;
$('<a/>').attr({href: '#', id: 'more'}).text('More Tweets').
insertAfter(target);
},
collapse: function() {
var context = this.ul;
$('#more').live('click', function(e) {
var $a = $(this);
var defaultText = 'More Tweets';
var newText = 'Hide';
var set = $('li', context).not(':first');
if(set.is(':hidden')) {
set.slideDown('slow');
$a.text(newText);
} else {
set.slideUp('slow');
$a.text(defaultText);
}
e.preventDefault();
});
},
// continues
};
});
Finally, we kicks things off with a method for initializing our object:
$(function() {
var TweetsList = {
ul: $('#twitter_update_list'),
hide: function() {
var context = this.ul;
$('li', context).not(':first').hide();
},
more: function() {
var target = this.ul;
$('<a/>').attr({href: '#', id: 'more'}).text('More Tweets').
insertAfter(target);
},
collapse: function() {
var context = this.ul;
$('#more').live('click', function(e) {
var $a = $(this);
var defaultText = 'More Tweets';
var newText = 'Hide';
var set = $('li', context).not(':first');
if(set.is(':hidden')) {
set.slideDown('slow');
$a.text(newText);
} else {
set.slideUp('slow');
$a.text(defaultText);
}
e.preventDefault();
});
},
init: function() {
this.hide();
this.more();
this.collapse();
}
};
});
You can see the demo below.