Ситуация такая. Два ряда картинок по 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> </td>
</tr>
<tr>
<td>Характеристики</td>
<td> </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> </td>
</tr>
<tr>
<td>Характеристики</td>
<td> </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> </td>
</tr>
<tr>
<td>Характеристики</td>
<td> </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> </td>
</tr>
<tr>
<td>Характеристики</td>
<td> </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>
Я понимаю, что код кострубатый. Только учусь. Подскажите, как правильно реализовать задуманное.
