View additional information on jQuery

Good day to all :) There was a very hemorrhagic question, so please faint-hearted and comrades who like to put dizlik, do not read further ^^.

And so, if you did not find yourself in the list above, then a question for you.

There is:

1. 16-year-old dunce (Tobish me)
2. The desire to embody a toy of childhood (Pokemoshki ^^)

The question itself:

These comrades, Pokemon, have such characteristics as:

1. Stats (HP, Attack, Speed, etc.)
2. Attacks (What they warm each other ^^)
3. Information (Gender, Master, etc.)

Task:

There is such html code:

<center class='errorMess'>#999 Pokemon</center> <table> <tr> <td> <span id='pokeTitle'><img src='/style/pok/norm/.jpg' width='250' height='190' border='1'></span> <table border=0 cellspacing=0 width=252 height=10> <tr> <td style='padding:0'> <div style='width:2%;background:green;height:15px;font-size:9pt;color:black;'>0</div> </td> </tr> <tr> <td style='padding:0'> <div style='width:2%;background:blue;height:6px;font-size:0pt;'>0</div> </td> </tr> </table> <div class='itemUse'> <a href='0' id='dropItemFromPok'><img src=/style/items/.gif width=32 height=32 alt='' title='' border='0'></a> </div> </td> <td> <div style='text-align:center; font:11px Tahoma; color: #1D4141;'> <a href='#' id='clickInfoPok1-1'>инфо</a> - <a href='#' id='clickInfoPok2-1'>статы</a> - <a href='#' id='clickInfoPok3-1'>атаки</a> </div> <div style='height:200;'> <div id='infoPok1-1'> <center><b>Информация</b></center> <img src='/style/another/0.gif' width='7' height='13' border='0'><b></b><BR> <b>Тип:</b> <BR> <b>Характер:</b> <BR> <p><a href='2' id='makeStart'>Сделать стартовым</a></p> </div> <div id='infoPok2-1'> <center><b>Статы</b></center> <table> <td><td><i>Стат</i></td> <td><i>Ген</i></td> <td><i>EV</i></td></tr> <tr><td>НР:</td> <td>0</td> <td width='30'>0</td> <td>0</td></tr> <tr><td>Атака:</td> <td>0</td> <td>0</td> <td>0</td></tr> <tr><td>Защита:</td> <td>0</td> <td>0</td> <td>0</td></tr> <tr><td>Скорость:</td> <td>0</td> <td>0</td> <td>0</td></tr> <tr><td>Спец. Атака:</td> <td>0</td> <td>0</td> <td>0</td></tr> <tr><td>Спец. Защита:</td> <td>0</td> <td>0</td> <td>0</td></tr> <tr><td><b>&nbsp;EV: 0</b></td> <td></td> <td></td></tr> </table> </div> <div id='infoPok3-1'> <center><b>Атаки</b></center> <table> <tr><td>0</td> <td>0</td></tr> <tr><td>0</td> <td>0</td></tr> </table> <p><center><a href='#' id='teachAtk'>Начать тренировку</a></center></p> </div> </div> </td> </tr> </table> 

`And also, there is code on jQuery:

 var i=1; while(i <= 6){ $('#infoPok1-'+i).hide(); $('#infoPok3-'+i).hide(); $('#clickInfoPok1-'+i).click(function(){ $('#infoPok1-'+i).fadeIn(700); $('#infoPok2-'+i).hide(); $('#infoPok3-'+i).hide(); }); $('#clickInfoPok2-'+i).click(function(){ $('#infoPok1-'+i).hide(); $('#infoPok2-'+i).fadeIn(700); $('#infoPok3-'+i).hide(); }); $('#clickInfoPok3-'+i).click(function(){ $('#infoPok1-'+i).hide(); $('#infoPok2-'+i).hide(); $('#infoPok3-'+i).fadeIn(700); }); i++; } 

Here, the essence of the question is that you can flip the characteristics of Pokemon.

Explanations:

Such blocks as:

1. infoPok1-1
2. infoPok2-1
3. infoPok3-1

Must take turns to alternate. For example, the block <div id='infoPok1-1'> open, but the rest of the blocks must be closed. Our <div id='infoPok1-1'> is responsible for information about pokemon. But if the user wants to know which stats from his pets, he clicks on the stats, and the <div id='infoPok1-1'> block closes, and the <div id='infoPok2-1'> block opens. I would be very grateful to those who help :)