Javascript-форум - Спойлер под картинки с выпадающими таблицами

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Спойлер под картинки с выпадающими таблицами (https://javascript.ru/forum/dom-window/52205-spojjler-pod-kartinki-s-vypadayushhimi-tablicami.html)

Спойлер под картинки с выпадающими таблицами

Ситуация такая. Два ряда картинок по 4 в каждом. Под каждой в спойлере скрыта таблица со свойствами.
Нужно сделать, чтоб при клике на картинку открывалась таблица на все ширину страницы, а картинка немного опускалась (на 5px) и заменялась другой (такая же картинка, только с тенью).
Сейчас у меня при нажатии на картинку открывается таблица, но все картинки что идут следующие съезжают вниз.
Вот мой код.

<div style="display:inline">
  <div style="width:150; display:inline"><a href="javascript://" class="splLink"><img src="images/product/p2-1.gif" width="100" height="100"></a>
    <div class="splCont" style="100%">
      <table width="100%" class="article_examples" border="0">
        <tr>
          <td>Название</td>
          <td>product1</td>
        </tr>
        <tr>
          <td>Описание</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Характеристики</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
  </div>
  <div style="width:150; display:inline"><a href="javascript://" class="splLink"><img src="images/product/p2-2.gif" width="100" height="100"></a>
    <div class="splCont" style="100%">
      <table width="100%" class="article_examples" border="0">
        <tr>
                  <td>Название</td>
          <td>product2</td>
        </tr>
        <tr>
          <td>Описание</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Характеристики</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
  </div>
  <div style="width:150; display:inline"><a href="javascript://" class="splLink"><img src="images/product/p2-3.gif" width="100" height="100"></a>
    <div class="splCont" style="100%">
      <table width="100%" class="article_examples" border="0">
        <tr>
                  <td>Название</td>
          <td>product3</td>
        </tr>
        <tr>
          <td>Описание</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Характеристики</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
  </div>
  <div style="width:150; display:inline"><a href="javascript://" class="splLink"><img src="images/product/p2-4.gif" width="100" height="100"></a>
    <div class="splCont" style="100%">
      <table width="100%" class="article_examples" border="0">
        <tr>
                  <td>Название</td>
          <td>product4</td>
        </tr>
        <tr>
          <td>Описание</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Характеристики</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript">
 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
 
</script>

Я понимаю, что код кострубатый. Только учусь. Подскажите, как правильно реализовать задуманное.

SkyAn,
Дай спойлеру с таблицей позицию: absolute

Сорри

.splCont{display:none;border:1px solid #cccccc;padding:3px 5px;}

Код брал с нета.

рони,
Большое спасибо за ссылку. Все сделал как хотел. Только есть маленькая проблема, в ИЕ, при добавление страницы на сайт блоки идут один за одним, а не переносятся как в ФФ. Как это поправить?

SkyAn,
а где код ?

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs1" ).tabs({
collapsible: true,
active: false 
});
});
$(function() {
$( "#tabs2" ).tabs({
collapsible: true,
active: false 
});
});</script>

<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<div id="tabs1">
  <ul>
    <li><a href="#tabs-11"><img src="images/product/p1-1.gif" width="100" height="100"  border="0"></a></li>
    <li><a href="#tabs-12"><img src="images/product/p1-2.gif" width="100" height="100"  border="0"></a></li>
  </ul>
  <div id="tabs-11">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p1-1-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-1-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-1-3.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
  <div id="tabs-12">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p1-2-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-2-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-2-3.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
</div>
<div id="tabs2">
  <ul>
    <li><a href="#tabs-21"><img src="images/product/p2-1.gif" width="100" height="100"  border="0"></a></li>
    <li><a href="#tabs-22"><img src="images/product/p2-2.gif" width="100" height="100"  border="0"></a></li>
    <li><a href="#tabs-23"><img src="images/product/p2-3.gif" width="100" height="100"  border="0"></a></li>
  </ul>
  <div id="tabs-21">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p2-1-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-1-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-1-3.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-1-4.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
  <div id="tabs-22">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p2-2-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-2-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-2-3.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-2-4.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
  <div id="tabs-23">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p2-3-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-3-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-3-3.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-3-4.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
</div>

SkyAn,
смотрите ваше css -- скрипт и его css тут не причём

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>
$(function() {
$( "#tabs1" ).tabs({
collapsible: true,
active: false
});
$( "#tabs2" ).tabs({
collapsible: true,
active: false
});
});
  </script>
</head>
<body>
<div id="tabs1">
  <ul>
    <li><a href="#tabs-11"><img src="images/product/p1-1.gif" width="100" height="100"  border="0"></a></li>
    <li><a href="#tabs-12"><img src="images/product/p1-2.gif" width="100" height="100"  border="0"></a></li>
  </ul>
  <div id="tabs-11">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p1-1-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-1-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-1-3.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
  <div id="tabs-12">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p1-2-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-2-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p1-2-3.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
</div>
<div id="tabs2">
  <ul>
    <li><a href="#tabs-21"><img src="images/product/p2-1.gif" width="100" height="100"  border="0"></a></li>
    <li><a href="#tabs-22"><img src="images/product/p2-2.gif" width="100" height="100"  border="0"></a></li>
    <li><a href="#tabs-23"><img src="images/product/p2-3.gif" width="100" height="100"  border="0"></a></li>
  </ul>
  <div id="tabs-21">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p2-1-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-1-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-1-3.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-1-4.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
  <div id="tabs-22">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p2-2-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-2-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-2-3.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-2-4.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
  <div id="tabs-23">
    <table width="100%" class="article_examples" border="0">
      <tr>
        <td><img src="images/product/p2-3-1.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-3-2.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-3-3.gif" width="100" height="100"  border="0"></td>
        <td><img src="images/product/p2-3-4.gif" width="100" height="100"  border="0"></td>
      </tr>
    </table>
  </div>
</div>

</body>
</html>