单击按钮时jquery分别显示

我有一组按钮,单击每个按钮,它将显示相应的div并隐藏所有其他同级项。我绝对是jquery的初学者,所以我找到了一个解决方案,但是兄弟div不会隐藏。也可以通过if/else完成吗?

$('#showMcq, #showOe, #showLt, #showAs').click(function() {
  $(this).parents('.course-design-custom').addClass('d-none');
});

$('#showMcq').click(function() {
  $('#McqView').removeClass('d-none');
});

$('#showOe').click(function() {
  $('#OeView').removeClass('d-none');
});

$('#showAs').click(function() {
  $('#AssessmentView').removeClass('d-none');
});

$('#showLt').click(function() {
  $('#LearningTaskView').removeClass('d-none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showMcq">MCQ</button>
<button id="showOe">Open Ended</button>
<button id="showLt">Learning Task</button>
<button id="showAs">Assessment</button>
<div class="container">
  <div class="row course-design-custom" id="McqView">
    MCQ
  </div>
  <div class="row course-design-custom d-none" id="OeView">
    Open Ended
  </div>
  <div class="row course-design-custom d-none" id="LearningTaskView">
    Learning Task
  </div>
  <div class="row course-design-custom d-none" id="AssessmentView">
    Assessment
  </div>
</div>