rifat2125

Как вариант, можно вообще от имени класса зависимость убрать. Здесь мы работает с индексами.

const setNthActive = (index) => {
  $(".tab-content > div").hide();
  $(`.tab-content > div:nth(${index})`).fadeIn(500);
};

$("#menu-tabs li").click(function () {
  $("#menu-tabs li").removeClass("active");
  $(this).addClass("active");

  setNthActive($(this).index());
  return false;
});

setNthActive(0);

Здравствуйте!
Вы можете посмотреть пример реализации здесь:

Комментарии добавил, если будет непонятно, можете задать вопрос. Надеюсь поможет)

Здравствуйте!
Вы можете посмотреть Рабочий пример

Дело в том, что если вы используете display: none/flex, плавной анимации не будет.
В примере выше, мы используем значение высоты (как и у вас), только добавляем самому меню overflow: hidden, чтобы скрыть содержимое.

Добрый день!
Например, так можно сделать

$(document).ready(function() {
  
  
  $("button").click(function(event) {
    event.preventDefault();
    const id = $(this).attr('data-id');
    
    $(".btn").removeClass("active-btn");    
    $(".content").removeClass("active-content");
    $(`.btn[data-id='${id}']`).addClass("active-btn");    
    $(`.content[data-content='${id}']`).addClass("active-content");
  });

});