Skip to main content
Code Review

Return to Question

added 5 characters in body
Source Link
Jamal
Jamal
  • 34.9k
  • 13
  • 133
  • 237

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

Image here

Demo

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");
});

DEMO : http://mehdi-rem.com

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");
});

DEMO : http://mehdi-rem.com

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

Image here

Demo

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");
});
add a demo
Source Link
edit approved Feb 28, 2016 at 3:37
Ghost Sites
edit approved Feb 28, 2016 at 3:37
Ghost Sites
  • 3
  • 1

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");
});

DEMO : http://mehdi-rem.com

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");
});

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");
});

DEMO : http://mehdi-rem.com

deleted 37 characters in body; edited title
Source Link
Jamal
Jamal
  • 34.9k
  • 13
  • 133
  • 237

just want to ask if my solution better one or not? Fading content for each TD

iI have an Html Table ,HTML table and iI use jQuery to fade some content for each TD:

Image here

myMy code works great  , but i askI want to know if my solution acan be better one or not ?

here is the code :.

<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>

here is the jQuery code :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");
});

just want to ask if my solution better one or not?

i have an Html Table , and i use jQuery to fade some content for each TD

Image here

my code works great  , but i ask if my solution a better one or not ?

here is the code :

<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>

here is the jQuery code :

$( "#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");
});

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