I have an HTML table and I use jQuery to fade some content for each TD:

[![Image here][1]][1]


  [1]: https://i.sstatic.net/U09SP.png

[**Demo**](http://mehdi-rem.com)

My code works great, but I want to know if my solution can be better.

    <table>
    <tr>
        <td id="first"><img src="#" /><br />Inserer un produit</td>
        <td><img src="#" /><br /></td>
        <td id="second"><img src="#" /><br />Inserer un nv crédit</td>
    </tr>
    <tr>
        <td id="third">Afficher les produits</td>
        <td id="fourth"><a href="#">Afficher les crédits courante</a></td>
    </tr>

**jQuery**

    $( "#first" ).click(function() {
    if( $("#Element2" ).show || $("#Element3" ).show || $("#Element4" ).show){
        $("#Element2").hide();
        $("#Element3").hide();
        $("#Element4").hide();
    }
    $( "#Element1" ).fadeToggle("slow");
    });
    $( "#second" ).click(function() {
    if( $("#Element1" ).show || $("#Element3" ).show || $("#Element4" ).show){
        $("#Element1").hide();
        $("#Element3").hide();
        $("#Element4").hide();
    }
    $( "#Element2" ).fadeToggle( "slow");
    });
    $( "#third" ).click(function() {
    if( $("#Element1" ).show || $("#Element2" ).show || $("#Element4" ).show){
        $("#Element1").hide();
        $("#Element2").hide();
        $("#Element4").hide();
    }
    $( "#Element3" ).fadeToggle( "slow");
    });
    $( "#fourth" ).click(function() {
    if( $("#Element1" ).show || $("#Element2" ).show || $("#Element3" ).show){
        $("#Element1").hide();
        $("#Element2").hide();
        $("#Element3").hide();
    }
    $( "#Element4" ).fadeToggle( "slow");
    });