Hello! I have implemented a small function using jQuery.
Unfortunately, I'm still a noob, and I have certainly written a code
longer and more repetitive than it could be. I would therefore ask you
an help to simplify it and improve it.

To simplify things better, you can find what I have done at this
address: http://www.flyareatest.altervista.org/provafade/index.html

The part of the code that i would like to improve is:

jQuery(function($){
                $(".toggler").click(function(){
                        $(".content").fadeToggle();
                        $(".content1").fadeOut("slow");
                        $(".content2").fadeOut("slow");
                        $(".content3").fadeOut("slow");
                        $(".content4").fadeOut("slow");
                        $(".content5").fadeOut("slow");
        });
                $(".toggler1").click(function(){
                        $(".content1").fadeToggle();
                        $(".content").fadeOut("slow");
                        $(".content2").fadeOut("slow");
                        $(".content3").fadeOut("slow");
                        $(".content4").fadeOut("slow");
                        $(".content5").fadeOut("slow");
        });
                $(".toggler2").click(function(){
                        $(".content2").fadeToggle();
                        $(".content").fadeOut("slow");
                        $(".content1").fadeOut("slow");
                        $(".content3").fadeOut("slow");
                        $(".content4").fadeOut("slow");
                        $(".content5").fadeOut("slow");
        });
                $(".toggler3").click(function(){
                        $(".content3").fadeToggle();
                        $(".content").fadeOut("slow");
                        $(".content1").fadeOut("slow");
                        $(".content2").fadeOut("slow");
                        $(".content4").fadeOut("slow");
                        $(".content5").fadeOut("slow");
        });
                $(".toggler4").click(function(){
                        $(".content4").fadeToggle();
                        $(".content").fadeOut("slow");
                        $(".content1").fadeOut("slow");
                        $(".content2").fadeOut("slow");
                        $(".content3").fadeOut("slow");
                        $(".content5").fadeOut("slow");
        });
                $(".toggler5").click(function(){
                        $(".content5").fadeToggle();
                        $(".content").fadeOut("slow");
                        $(".content1").fadeOut("slow");
                        $(".content2").fadeOut("slow");
                        $(".content3").fadeOut("slow");
                        $(".content4").fadeOut("slow");
        });


In essence, this is a page with 6 links and 6 initially hidden div. By
clicking on a link, the div appears relevant, it disappears by
clicking on the link again thanks to fadeToggle function.  By clicking
on a different link, the div (already opened). disappears thanks to
fadeOut function.
Thank you all for your help!

Reply via email to