Почему-то при нажатии и как на "авторереферат", так и на "диссертация", появляется один и тот же список ("автореферат"). И помимо этого больше никак не отрабатывает
$('.archive-btn').on('click', function() {
$('.archive-btn').removeClass('active');
if (!$(this).hasClass('active')) {
$(this).addClass('active');
}
$('.list').removeClass('active');
if (!$('.list').hasClass('active') && $('.list').has('#synopsis')) {
$('.list#synopsis').addClass('active');
} else if (!$('.list').hasClass('active') && $('.list').has('#essay')) {
$('.list#essay').addClass('active');
} else if (!$('.list').hasClass('active') && $('.list').has('#dissertation')) {
$('.list#dissertation').addClass('active');
}
});
#archive-content .items .list {
display: none;
}
#archive-content .items .list.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="archive-block" class="block-decor">
<div class="triangle"></div>
<div id="archive-content">
<div id="archive-border-top-left"></div>
<div class="items">
<ul class="list" id="synopsis">
<li>Запись1 (автореферат)</li>
<li>Запись2</li>
<li>Запись3</li>
<li>Запись4</li>
<li>Запись5</li>
<li>Запись6</li>
<li>Запись7</li>
<li>Запись8</li>
<li>Запись9</li>
</ul>
<ul class="list active" id="essay">
<li>Запись1 (реферат)</li>
<li>Запись2</li>
<li>Запись3</li>
<li>Запись4</li>
<li>Запись5</li>
<li>Запись6</li>
<li>Запись7</li>
<li>Запись8</li>
<li>Запись9</li>
</ul>
<ul class="list" id="dissertation">
<li>Запись1 (диссертация)</li>
<li>Запись2</li>
<li>Запись3</li>
<li>Запись4</li>
<li>Запись5</li>
<li>Запись6</li>
<li>Запись7</li>
<li>Запись8</li>
<li>Запись9</li>
</ul>
</div>
<div class="buttons">
<button id="synopsis" class="archive-btn">Автореферат</button>
<button id="essay" class="archive-btn active">Реферат</button>
<button id="dissertation" class="archive-btn">Диссертация</button>
</div>
</div>
А в сниппете и вовсе не хочет работать...