JavaScript/JQUERY improve code
<p>I got Js/Jquery code to trigger show/hide on hover of the colored "X". Each "X" has a different div and content to display. I know there is a better way to code the Js/Jquery other that repeating the same code but just changing the name of the div each "X" is calling for. You can see this in action in this <a href="http://jsfiddle.net/rolando_pdl/uF5pw/2/" rel="nofollow">fiddle</a><br />
I'm also using the Jquery <strong>qtips</strong> plugin to get the fading boxes to work<br /><br />
I will appreciate any advice on how to code this better.<br /> Thanks <br /><br />
Below is an example of the Js/Jquery that I'm talking about</p>

<pre><code>$(document).ready(function () {
    $('.box').hide();
    $('.trigger').mouseover(function (event) {
        $('.box').fadeIn(1000);
    });
    $('.trigger').mouseout(function (event) {
        $('.box').fadeOut(1000);
    });
});

$(document).ready(function () {
    $('.box2').hide();
    $('.trigger2').mouseover(function (event) {
        $('.box2').fadeIn(1000);
    });
    $('.trigger2').mouseout(function (event) {
        $('.box2').fadeOut(1000);
    });

    $(document).ready(function () {
        $('.box3').hide();
        $('.trigger3').mouseover(function (event) {
            $('.box3').fadeIn(1000);
        });
        $('.trigger3').mouseout(function (event) {
            $('.box3').fadeOut(1000);
        });

        $(document).ready(function () {
            $('.box4').hide();
            $('.trigger4').mouseover(function (event) {
                $('.box4').fadeIn(1000);
            });
            $('.trigger4').mouseout(function (event) {
                $('.box4').fadeOut(1000);
            });

            $(document).ready(function () {
                $('.box5').hide();
                $('.trigger5').mouseover(function (event) {
                    $('.box5').fadeIn(1000);
                });
                $('.trigger5').mouseout(function (event) {
                    $('.box5').fadeOut(1000);
                });

                $(document).ready(function () {
                    $('.box6').hide();
                    $('.trigger6').mouseover(function (event) {
                        $('.box6').fadeIn(1000);
                    });
                    $('.trigger6').mouseout(function (event) {
                        $('.box6').fadeOut(1000);
                    });
                    $(document).ready(function () {
                        $('.box7').hide();
                        $('.trigger7').mouseover(function (event) {
                            $('.box7').fadeIn(1000);
                        });
                        $('.trigger7').mouseout(function (event) {
                            $('.box7').fadeOut(1000);
                        });
                        $(document).ready(function () {
                            $('.box8').hide();
                            $('.trigger8').mouseover(function (event) {
                                $('.box8').fadeIn(1000);
                            });
                            $('.trigger8').mouseout(function (event) {
                                $('.box8').fadeOut(1000);
                            });
                        });
                    });
                });
            });
        });
    });
});
</code></pre>
