For the new blogs page I wanted to put together an accordion-like feature for viewing the posts to make it feel somewhat like a feed reader. I looked at different javascript libraries for this and chose to go with jQuery, not that others wouldn’t work, but because I had some limited experience with it.
I started toying around with the slideToggle() function, but after a couple hours I had to look around the internet for some help. I couldn’t have done it without Steve Krueger’s tutorial. Although I didn’t follow it exactly, it helped be over a few hurtles.
Here is the code I ended up with.
jQuery(document).ready(function($){
$('.story').hide();
$('.title').click(function(){
if($(this).is('.active')) {
$(this).toggleClass('active');
$(this).next('.story').slideToggle('fast');
return false;
} else {
$('.story:visible').slideUp('fast');
$('.title.active').removeClass('active');
$(this).toggleClass('active');
$(this).next('.story').slideToggle();
return false;
}
});
});
Also, as I was delving deeper into this project, I spent a lot of time around the WordPress Codex. I found this great function called wp_enqueue_script for loading javascript libraries. This is for use in WordPress plugins and themes so there is no conflicts or superfluous code. Pretty neat.
Update - June 29
I edited the page so when opening an item it will scroll to the top of your window. So much better. Some help from Learning jQuery and Marc Grabanski. I am using the jQuery.ScrollTo plugin.
Here is the updated code:
jQuery(document).ready(function($){
var scrollTop = jQuery(window).scrollTop();
$('#content > div.story').hide();
$('#content > h2.title').click(function() {
$('#content > h2.title').removeClass('active');
$(this).addClass('active');
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div.story:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
jQuery('#content > h2').each(function(i, h2){
h2top = jQuery(h2).offset().top;
if (scrollTop h2').each(function(i, h2){
h2top = jQuery(h2).offset().top;
if (scrollTop < h2top) {
jQuery.scrollTo('.active', 300 );
return false;
}
});
}
});
});
I’ve been really interested in organizing all my email messages. But I don’t really want to go through every single message to do that. Today I tried to make some filters in Gmail to at least get some general organization.
