Skip to main content
2 of 4
deleted 37 characters in body; edited title
Jamal
  • 34.9k
  • 13
  • 133
  • 237

Fading content for each TD

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

Image here

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");
});
Mehdi
  • 31
  • 1