jquery flip plugin show and hide content - jquery-plugins

Question

actually i am not a programmer, i am a designer...many than for those who reply this case.....
i have difficulties applying show and hide content on flip plugin.....
var init = function(){
$("#flipTop").click(function(e){
$("#flipbox").flip({
dir: "top",
endColor: "white",
duration:777,
onEnd: function(){
$("#flipbox").html(TOP);
$("#flipbox").css();
}
});
});
$("#flipRight").click(function(e){
$("#flipbox").flip({
dir: "right",
endColor: "yellow",
duration:777,
onEnd: function(){
$("#flipbox").html("RIGHT");
$("#flipbox").css({
color: "red",
background: "yellow"
});
}
});
});
$("#flipLeft").click(function(e){
$("#flipbox").flip({
dir: "left",
endColor: "blue",
duration:777,
onEnd: function(){
$("#flipbox").html("LEFT");
$("#flipbox").css({
color: "white",
background: "blue"
});
}
});
});
$("#flipBottom").click(function(e){
$("#flipbox").flip({
dir: "bottom",
endColor: "red",
duration:777,
onEnd: function(){
$("#flipbox").html("BOTTOM");
$("#flipbox").css({
color: "yellow",
background: "red"
});
}
});
});
}
$(document).ready(init);
===================================================================================================
I thought the above javascript is too redundant...it must be simplified in order to change show and hide content selected
and here is the HTML i tried to make.......
<ul id="navigation" >
<li class="selected">
TOP </li>
<li> RIGHT </li>
<li> LEFT </li>
<li> BOTTOM </li>
</ul>
<div id="container">
<div id="flipbox" class="top">
TOP
</div>
<div id="flipbox"class="right">
RIGHT
</div>
<div id="flipbox"class="left">
LEFT
</div>
<div id="flipbox"class="bottom">
BOTTOM
</div>
</div>
==========================================================================================
then i try to compile this for the java script command but i didnt work.... :(
$('document').ready(function(){
$('#flipbox').flip();
$('#navigation li a').each(function(){
$(this).click(function(){
$('#navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flipbox').flip({
dir: $this.attr("id"),
endColor: $this.attr("rel"),
duration:$this.attr("rev"),
onEnd: function(){
}, flipid, 1);
return false;
});
});
});
what i want to ask is how to make those works show and hide content after flip effect while clicking on the tab navigation......thanks a lot for those response this problemmmm

Answer 1

View the source-code of this page http://lab.smashup.it/flip/ it might help you understand, as i have never tried flip plugin yet i am willing to help you.!!