以相反的顺序关闭标签

    function display(el) {
      const show = !$(el).next('.hidden__wrapper').is(":visible");
      if (show){
        $(el).next('.hidden__wrapper').fadeToggle(300, function(){
          $(this).next().fadeToggle(300, arguments.callee);
        })
      } else {
        el = $(el).parent().children().last();
        $(el).fadeToggle(300, function(){
            $(this).prev('.hidden__wrapper').fadeToggle(300, arguments.callee);
        })
      }
    }
    
    

    .block {
      cursor: pointer;
      color: #fff;
      width: 500px;
      height: 50px;
      background-color: #333;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 20px;
    }
    .hidden {
      width: 500px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 20px;
    }
    .hidden-one {
      background-color: darksalmon;
    }
    .hidden-two {
      background-color: darkslategrey;
    }
    .hidden-three {
      background-color: darkolivegreen;
    }
    .hidden__wrapper {
      display: none;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>
      <div onclick="display(this)" class="block">Раскрыть</div>
      <div class="hidden__wrapper">
        <div class="hidden hidden-one">One</div>
      </div>
      <div class="hidden__wrapper">
        <div class="hidden hidden-two">Two</div>
      </div>
      <div class="hidden__wrapper">
        <div class="hidden hidden-three">Three</div>
      </div>

    </div>

function display(el) {
  var $el = $(el)
  var isVisible = $el.next().is(':visible')
  var $next = isVisible ? $el.nextAll(':last-child') : $el.next()

  $next.fadeToggle(300, function toggle() {
    $(this)[isVisible ? 'prev' : 'next']().not($el).fadeToggle(300, toggle);
  })
}

.block {
  cursor: pointer;
  color: #fff;
  width: 500px;
  height: 50px;
  background-color: #333;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
}
.hidden {
  width: 500px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
}
.hidden-one {
  background-color: darksalmon;
}
.hidden-two {
  background-color: darkslategrey;
}
.hidden-three {
  background-color: darkolivegreen;
}
.hidden__wrapper {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div onclick="display(this)" class="block">Раскрыть</div>
  <div class="hidden__wrapper">
    <div class="hidden hidden-one">One</div>
  </div>
  <div class="hidden__wrapper">
    <div class="hidden hidden-two">Two</div>
  </div>
  <div class="hidden__wrapper">
    <div class="hidden hidden-three">Three</div>
  </div>
</div>