Как добавить класс по клику?

Question

[Anto]

Добрый день!
Подскажите: есть 8 ссылок(LINK CLIK) при клике на первую ссылку она должен раскрываться(class="hidden") при нажатии на другую (скажем 5) она должна раскрыться а 1 ссылка закрыться при повторно нажатии на ссылку 5 она должна закрыться!
Пример кода прилогается

<script>
	$(function(){
$('.clik').click(function(){
	$(".hidden").toggleClass("active");
});
		});
</script>
<style>
.dop_sotrud{
	height: 290px;
}
.clear-s{
	clear:both!important;
	padding-top: 40px;
}
.accordion .link p {
	cursor: pointer;
	color: #0493D6;
}
.link>span{
	border-bottom: 1px dotted #0493D6;
	display: block;
	width: 228px;
}
.active {
	display: block!important;
	width: 1110px;
	margin-top: 20px;
}

</style>
    <div class="accordion">
      <div class="col-md-5 col-sm-5 col-xs-5">
        <div align="center"><img src="/upload/medialibrary/80d/muravskayanv.jpg" title="gsbfsyy ingmfj ikkoxsjc.jpg" border="0" align="middle" alt="muravskayanv.jpg" width="300" height="200"  /><b> </b>
          <br />
         </div>

        <div align="center"><b>TEXT</b>
          <br />
         TEXT
          <br />
        TEXT
          <br />
         <b>TEXT</b>
          <br />
         TEXT
          <br />
         </div>

        <div class="link clik" align="center"><p>LINK CLIK</p>
		<span></span>
<div class="hidden">
		<div class="col-md-3 col-sm-3 col-xs-3">
		<img src="/upload/medialibrary/fb7/ledyaevaa.jpg" title="ledyaevaa.jpg" border="0" alt="ledyaevaa.jpg" width="200" height="150"  />
		<div align="center">TEXT<br />
		<b> TEXT</b><br />
		TEXT
		</div>
		</div>
</div>
		</div>
</div>

<div class="col-md-5 col-sm-5 col-xs-5">
        <div align="center"><img src="/upload/medialibrary/e9b/gsbfsyy-ingmfj-ikkoxsjc.jpg" title="gsbfsyy ingmfj ikkoxsjc.jpg" border="0" align="middle" alt="gsbfsyy ingmfj ikkoxsjc.jpg" width="300" height="200"  /><b> </b>
          <br />
         </div>

        <div align="center"><b>TEXT</b>
          <br />
         TEXT
          <br />
         TEXT
          <br />
         <b> TEXT</b>
         TEXT
          <br />
         </div>
         <div class="link clik" align="center"><p>LINK CLIK</p>
 		<span></span>
 <div class="hidden">
 		<div class="col-md-3 col-sm-3 col-xs-3">
 		<img src="/upload/medialibrary/fb7/ledyaevaa.jpg" title="ledyaevaa.jpg" border="0" alt="ledyaevaa.jpg" width="200" height="150"  />
 		<div align="center">TEXT<br />
 		<b> TEXT</b><br />
 		TEXT
 		</div>
 		</div>
 </div>
 		</div>
       </div>
     	</div>
   </div>
 </div>

Comments

[Максим]

а сам jquery подключен ??

Answer 1

[ProjectSoft]

$('.clik p').click(function(){
	var parent = $(this).parent(),
		has = $(".hidden", parent).hasClass('active');
	$(".hidden").removeClass("active");
	!has && $(".hidden", parent).addClass("active");
});

Порт представленного вами кода с решением
https://jsfiddle.net/ProjectSoft/s6hr3p2e/

Comments

[Anto]

Спасибо, то что нужно.

Answer 2

[lega]

https://jsfiddle.net/lega911/z0y2fjL7/