Javascript-форум - Нужна помощь в Jqeury

В общем, переделываю шаблон для сайта, почти все закончил, но возникла проблема с менюшкой. Показываю на скриншотах что да как.
Меню с двумя разделами, реализовано по принципу меню-закладки.

Это первое раздел меню

При нажатии на ссылку "Раздел 2" появляется с помощью .hide() и .show() появляется второй раздел в этом же меню. При этом так сказать "стрелочка" перемещается с помощью .animate от одной ссылки к другой

Вот такое мне меню нужно. Но если еще раз нажать на ссылку "Раздел 2", эта "стрелочка" убегает за экран, вот скриншот:

Вот тут у меня и возникла проблема, как сделать так чтобы при втором щелчке эта стрелочка не убегала а осталась на месте, ну или в крайнем случае переключалась на "Раздел 1".

Прилагаю код к описанию. В Jquery не селён я, мне больше по душе PHP, вот по этому и прошу помощи. Сильно не ругайте за Jquery код, ибо я в нем мало что соображаю, на примерах вчера пытался что-то сделать.

Код:



/*Jquery код в HEAD*/





<script>

$(window).ready(function () {

      $("#tab2").hide();

      $("#tab1").show();

      $("#right").animate({opacity: 0.4,}, 500);

});



  $(document).ready(function(){



    $("#left").click(function(){

      $(".col-module-header-top").animate({"left": "-=295px"}, "slow");

      $("#right").animate({opacity: 0.4,}, 500);

      $("#left").animate({opacity: 1,}, 500);

      $("#tab2").hide(500);

      $("#tab1").show(500);

    });

    

    $("#right").click(function(){

      $(".col-module-header-top").animate({"left": "+=295px"}, "slow");

      $("#left").animate({opacity: 0.4,}, 500);

      $("#right").animate({opacity: 1,}, 500);

      $("#tab1").hide(500);

      $("#tab2").show(500);





    });



  });

  </script>





/*код меню*/



<div class="col-module">

  <div class="col-module-style1">

    <div class="col-module-header">

      <div class="mod-title-left" id="left"><a href="#"><i>Раздел 1</i></a></div>

<div class="mod-title-right" id="right"><a href="#"><i>Раздел 2</i></a></div>

      <div class="col-module-header-top"></div>

    </div>  



<div class="clearfix">

<div class="lofmenu_jshopping">

<ul class="lofmenu">

<div id="tab1">

  <li class="lofitem1"> <a href="/" ><span>Категория раздела 1</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>



</div>

<div id="tab2">

  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>

  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>

</div>

</ul>              

  </div>

</div>