JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Year Filter -->
<div class="header-box">
  <div class="header-click">
    <h5>Publish Year</h5>
  </div>
  <div class="no-display">
    <p>test1</p>
  </div>
</div>
<!-- Condition Filter -->
<div class="header-box">
  <div class="header-click">
    <h5>Condition</h5>
  </div>
  <div class="no-display">
    <p>test3</p>
  </div>
</div>

CSS

.header-click {
  cursor: pointer;
}
.no-display {
  display: none;
}
.header-box {
  margin-bottom: 15px;
}

JavaScript

$('.header-click').on('click', function() {
    $parent_filter = $(this).closest('.header-box');
    $parent_filter.siblings().find('.no-display').slideUp();
    $parent_filter.find('.no-display').slideToggle(500, 'swing');
  });