<body>
  
  <button class="js__filters-open btn" type="button">Filters</button>
  
  <div class="filters js__filters">
    
    <div class="filters-card">
      <div class="filters-card__header js__filters-header">Color</div>
      <div class="filters-card__content" style="display: block;">
        <input type="text" placeholder="Search" class="js__search-input">
        <ul>
          <li>Checkbox #1</li>
          <li>Checkbox #2</li>
          <li>Checkbox #3</li>
        </ul>
      </div>
    </div>
    
    <div class="filters-card">
      <div class="filters-card__header js__filters-header">Size</div>
      <div class="filters-card__content" style="display: block;">
        <input type="text" placeholder="Search" class="js__search-input">
        <ul>
          <li>Checkbox #1</li>
          <li>Checkbox #2</li>
          <li>Checkbox #3</li>
          <li>Checkbox #4</li>
          <li>Checkbox #5</li>
        </ul>
      </div>
    </div>
    
    <div class="filters-card">
      <div class="filters-card__header js__filters-header">Price</div>
      <div class="filters-card__content">
        <input type="text" placeholder="Search" class="js__search-input">
        <ul>
          <li>Checkbox #1</li>
          <li>Checkbox #2</li>
        </ul>
      </div>
    </div>
    
    <div class="filters-card">
      <div class="filters-card__header js__filters-header">Weight</div>
      <div class="filters-card__content">
        <input type="text" placeholder="Search" class="js__search-input">
        <ul>
          <li>Checkbox #1</li>
          <li>Checkbox #2</li>
          <li>Checkbox #3</li>
          <li>Checkbox #4</li>
          <li>Checkbox #5</li>
        </ul>
      </div>
    </div>
    
    <div class="filters-card">
      <div class="filters-card__header js__filters-header">Season</div>
      <div class="filters-card__content">
        <input type="text" placeholder="Search" class="js__search-input">
        <ul>
          <li>Checkbox #1</li>
          <li>Checkbox #2</li>
          <li>Checkbox #3</li>
          <li>Checkbox #4</li>
          <li>Checkbox #5</li>
        </ul>
      </div>
    </div>
    
  </div>
  
</body>
body {
  margin: 25px;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  height: 36px;
  width: 180px;
  cursor: pointer;
  background-color: #ddd;
  outline: 0;
}

.filters {
  position: fixed;
  top: 25px;
  left: 300px;
  height: calc(100vh - 50px);
  background-color: #eee;
  border: 1px solid #ddd;
  width: 300px;
  overflow-y: auto;
  padding: 15px;
  display: none;
}

.filters-card {
  margin-bottom: 15px;
  &__header {
    background-color: #ddd;
    padding: 15px 20px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background .2s ease-in-out;
    &:hover {
      background-color: #c9c9c9;
    }
  }
  &__content {
    padding: 13px 15px;
    border: 1px solid #ddd;
    display: none;
    input {
      width: 100%;
      margin-bottom: 13px;
      font-size: 13px;
      height: 36px;
      padding: 0 15px;
      background-color: #ddd;
      border: 1px solid #bbb;
      outline: 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 13px;
      li {
        padding: 10px 0;
        &:not(:last-child) {
          border-bottom: 1px solid #ddd;
        }
        &:first-child {
          padding-top: 0;
        }
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
}
View Compiled 
$(document).ready(function(){
  
  // Opening Filters Block
  $('.js__filters-open').click(function(e){
    e.preventDefault();
    $('.js__filters').toggle();
  });
  
  // Filters Accordion
  $('.js__filters-header').click(function(){
    var filtersContainer = $(this).closest('.filters-card');
    var filtersList = filtersContainer.find('.filters-card__content');
    filtersList.slideToggle();
  });
  
  // Search Input
  $(document).on('focus', '.js__search-input', function(){
    var container = $(this).closest('.filters-card');
    var containerOffset = container[0].offsetTop - 15;
    
    $('.js__filters').stop().animate({ scrollTop: containerOffset }, 1000);
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js