Изменение картинки при развертывании меню

[sokolbla]

Имеется данный код меню категорий

<div class="box">

<div class="box-headinghome"><?php echo $heading_title; ?></div>

<div class="box-content3">

    <div class="box-category3">

<script type="text/javascript"> 

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('fast');return false;});}); 

</script>

      <ul>

        <?php foreach ($categories as $category) { ?>

        <li class="zag" >

          <?php if ($category['category_id'] == $category_id) { ?>

         <table width="100%" border="0">

  <tr>

    <td width="45px">

  <img src="/<?php echo $category['image']; ?>"  style="width:43px; "  /></td>

    <td><a titlr="<?php echo $category['name']; ?>" style="width:150px;"  href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a></td>

  </tr>

</table>

          <?php } else { ?>

  <table width="100%" border="0">

  <tr>

    <td width="45px">

  <img src="/<?php echo $category['image']; ?>"  style="width:43px; "  /></td>

    <td><a style="width:150px;"  href="<?php echo $category['href']; ?>">  <?php echo $category['name']; ?> </a></td>

  </tr>

</table>

          <?php } ?>

   

          <?php $c=1; ?>

          

          <?php if ($category['children']) { ?>

          <ul class="block1"><div style="background-color:#FFFFFF; width:10px; height:39px; ; margin-top:-13px; position:absolute;"></div><div style="display:block; float:left; margin-right:10px; ">

            <?php foreach ($category['children'] as $child) { ?>

            <?php $c=1+$c ; ?> <div class="subblock"><li style="border-top: none;" >

              <?php if ($child['category_id'] == $child_id) { ?>

              <a title="Развернуть" style="border:none; margin-top:16px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="padding-left:10px; margin-left:20px; padding-bottom:5px; "    href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>

              <?php } else { ?>

         <a title="Развернуть" style="border:none; margin-top:16px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="padding-left:10px; margin-left:20px; padding-bottom:5px; margin-bottom:5px; "   href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>

              <?php } ?><?php if($child['sister_id']){ ?>

 

<ul  style="position:relative; ; display:none; width:220px; padding-top:15px; "  class="sliesQ" >

 

<?php foreach($child['sister_id'] as $sisters) { ?>

 

 

<li style=" margin-top:-19px;">

 

<?php if ($sisters['category_id'] == $sisters_id) { ?>

 

<a href="<?php echo $sisters['href']; ?>" >  <?php echo $sisters['name']; ?></a>

 

<?php } else { ?>

 

<a href="<?php echo $sisters['href']; ?>">   <?php echo $sisters['name']; ?></a>

 

<?php } ?>

 

</li>

 

<?php } ?>

 

</ul>

 

<?php } ?>

            </li></div><?php

 

if ($c == 11) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

 

if ($c == 21) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

 

if ($c == 31) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

 

if ($c == 41) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

 

if ($c == 51) echo "</div> <div style='display:block; float:left; margin-right:10px;'> ";

 

?>

            <?php } ?></div>

          </ul>

          <?php } ?>

        </li>

        <?php } ?>

      </ul>

 

</div>

</div>

</div>

 

Непосредственно скрипт который отвечает за развертывание меню:

 

<script type="text/javascript"> 

$(document).ready(function(){$('.sliEsq').click(function(){$(this).parent().children('.sliesQ').toggle('fast');return false;});}); 

</script>

 

Код ссылки при нажатии на которую происходит развертывание меню:

 

<a title="Развернуть" style="border:none; margin-top:16px; width:11px; position:absolute; height:11px; float:left;" href="javascript://" class="sliEsq">    <img  src="/arrow3.png" /></a> <a    style="padding-left:10px; margin-left:20px; padding-bottom:5px; "    href="<?php echo $child['href']; ?>">  <?php echo $child['name']; ?></a>

 

 

Теперь вопрос: как сделать так что при нажатии при развертывании картинка менялась, к примеру ПЛЮС изменялася на минус и наоборот?

[afwollis]

перенесено по просьбе автора темы.

Змінено 27 листопада 2013 користувачем afwollis

[sokolbla]

Ребята помогите!