I can think of a couple ways of doing this.
1) you preload all the wordpress content into separate divs, give the divs IDs relating to the links on the menu. When you click the link it slides out the corresponding DIV to the ID.
2) you use ajax calls to load the content and replace the content of the single sliding div.
Also, I'd change your slide in function to have a callback that slides out the newly selected item after the slide in is completed.
$("#navigation li a").click(function (event) {
event.preventDefault();
var effect = 'slide', // Set the effect type
options = { direction: 'left' }, // Set the options for the effect type chosen
duration = 700, // Set the duration
id = this.id.replace('item','');
if ($('.out').length>0){
$('.out').toggle(effect,options,duration, function(){
$(this).removeClass('out');
$('#content'+id).toggle(effect, options, duration, function(){
$(this).addClass('out');
});
});
} else {
$('#content'+id).toggle(effect, options, duration, function(){
$(this).addClass('out');
});
}
});
here's a modification of your fiddle to show what I'm saying for option 1:
to ajax it, you can use the .load() function like LeGEC said before me. Here's my code adapted for it. This assumes that the links actually point to the article content you want to load.
$("#navigation li a").click(function (event) {
event.preventDefault();
var effect = 'slide', // Set the effect type
options = { direction: 'left' }, // Set the options for the effect type chosen
duration = 700, // Set the duration
href = $(this).attr('href');
if ($('.out').length>0){
$('.out').toggle(effect,options,duration, function(){
$(this).removeClass('out');
$('#content').load(href, function(){
$('#content').toggle(effect, options, duration, function(){
$(this).addClass('out');
});
});
});
} else {
$('#content').load(href, function(){
$(this).toggle(effect, options, duration, function(){
$(this).addClass('out');
});
});
}
});
In this solution you'd only have one content DIV, like you originally had, so the stuff with the id is moot.