отключить повторное появление заготовка

[alexman86]

Здравствуйте башковитые люди!
изучая jquery столкнулся с такой проблемой 2 дня уже ломаю голову и много что у меня получилось но только не так как хотелось бы.
Одним словом есть горизонтальный аккордеон с 5 вкладками они открываются поочередно. если она открыта то по ее нажатию не должна закрываться, а закрывается она по нажатию другой вкладки.
В тот момент когда открывается другая вкладка то заголовок должен на открывающейся вкладке изчезнуть и на закрывающейся появится(так и происзодит) но когда я жму по открытой вкладке(нет заголовка) то появляется заголовок, а его не должно быть.
Помогите пожалуйста сделать так что бы сколько бы я не жал по открытой вкладке заголовок не появлялся.

$(document).ready(function(){
 
					activeItem = $("#accordion li").eq(2);
					$(activeItem).addClass('active');
					$('.title',activeItem).fadeOut(0);
				 
					$("#accordion li").on('click',activeItem,function(){
						$(this).animate({width: "600px"}, {duration:500, queue:false})
						$(activeItem).animate({width: "100px"},{duration:500, queue:false});
						$('.title',this).fadeOut(200);
						$(activeItem).animate({width: "100px"},{duration:500, queue:false});
						$(this).animate({width: "600px"}, {duration:500, queue:false});
						$('.title', activeItem).fadeIn(200);
						activeItem = this;

					});
						
 
			});

<div id="content">



<ul id="accordion">
      <li>
        <img src="images/section_1.png" />
		<div class="title">Title</div>
        <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_2.png" />
		<div class="title">Title</div>
        <strong>Section 2 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_3.png" />
		<div class="title">Title</div>
        <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
        <img src="images/section_4.png" />
		<div class="title">Title</div>
        <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
     </li>
     <li>
        <img src="images/section_4.png" />
		<div class="title">Title</div>
        <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
    </li>
            </ul>
        </div>

CSS

body {
	margin:0;
	padding:0;
}

#accordion {
list-style: none;
padding: 0;
height: 338px;
overflow: hidden;
background: #7d8d96;
margin: 0px auto;
}
 
#accordion li {
float: left;
display: block;
height: 338px;
width: 100px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid green;
margin: 0px auto;
}
 
#accordion li img {
border: none;
float: left;
margin: -15px 15px 0 0;
}
 
#accordion li.active {
width: 600px;
}
.title {
border: 1px solid red;
z-index: 20;
}
#content {
border:1px solid red;

}