Как сделать скрипт табов (аккордеон) на jQuery?

Question

[Valery23]

Пытаюсь сделать функционал табов, получается вот так:

<div class="panel">

<div class="panel-heading">
<a href="#" class="link_any"></a>
</div>

<div class="panel-collapse">
<div class="panel-body">
Открывающийся и прятающийся текст.
</div>
</div>

</div>

jQuery(document).ready(function () {
		jQuery('.panel-heading').click(function () {
			jQuery(this).toggleClass('in').next().slideToggle();
			jQuery('.panel-heading').not(this).removeClass('in').next().slideUp();
				event.preventDefault()
        });
    });

.panel-heading {
    background: #2B74B9;
 margin-top: 5px;
 position: relative;
}
.panel-heading a {
    background: #F04438;
    color: #ffffff;
    display: block;
    position: relative;
    transition: 0.3s;
    width: 30px;
    height: 30px;
    border-radius: 25px;
    position: absolute;
right: 20px;
    top: 30px;
}

.panel-heading a::after {
 content: "\f107";
 font-family: "FontAwesome";
 position: absolute;
 right: 15px;
 transition: 0.3s;
}
.panel-heading.in a::after {
 transform: rotate(180deg);
}

.panel-collapse {
 display: none;

}
.wrapper-ul {
 display: flex;
 justify-content: space-around;
}
.wrapper-ul.df {
 justify-content: flex-start;
}
.wrapper-ul ul {
 margin-top: 5px;
 padding-left: 20px;
 list-style-type: none;
}
.wrapper-ul li {
 position: relative;
}
.wrapper-ul li::before {
 content: '\f105';
 font-family: "FontAwesome";
 position: absolute;
 left: -13px;
 top: 0;
 color: #09afdf;
 transition: 0.5s;
}
.wrapper-ul li a {
 color: #09afdf;
}
.wrapper-ul li:first-child::before {
 content: '';
}
.wrapper-ul li:first-child {
 color: #333333;
 font-weight: 500;
}
.wrapper-ul li a:hover {
 color: #097ca6;
}
.wrapper-ul li:hover::before {
 transform: translateX(4px);
 color: #097ca6;
}
.button {
 margin-top: 20px;
}
.button a {
 background: #09afdf;
 color: #ffffff;
 padding: 8px 25px;
 border-radius: 3px 3px 3px 3px;
 border: 1px solid #0994c4;
 transition: 0.3s;
}
.button a:hover {
 background: #0994c4;
}

Как сделать, что бы работало только при клике на ссылку <a href="#" class="link_any"></a>, а не при клике на весь блок <div class="panel-heading">?

Answer 1

[Тигран Абрамян]

$('.link_any').click(function(event) {
  $(this).closest('.panel-heading').toggleClass('in').next().slideToggle();
  $('.panel-heading').not($(this).closest('.panel-heading')).removeClass('in').next().slideUp();
  event.preventDefault();
});

Comments

[Valery23]

Спасибо, но задача табов другая совсем. Поправил вопрос.

[Тигран Абрамян]

Valery23, Разницы нету, js код и так работает, обновил ответ.

[Valery23]

TAbrahamyan, Все верно, спасибо!