jquery flip plugin show and hide content

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">
            <a href="#" id="Top"    rel="white"  rev="777">  TOP   </a></li>  
        <li><a href="#" id="Right"  rel="yellow" rev="777"> RIGHT  </a></li> 
        <li><a href="#" id="Left"   rel="blue"   rev="777">  LEFT  </a></li>  
        <li><a href="#" id="Bottom" rel="red"    rev="777"> BOTTOM </a></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.!!