How to hide show for condition in jQuery

I am trying to create a responsive menu. In the code below the element with class menu_show_mb will be hidden (I used CSS to hide this class) and I want to show the element span.menu_click by default.

When a user clicks span.menu_click the content in .menu_show_mb will be shown and hide the element span.menu_click then show span.menu_close.

How can I do this?

if ($(".menu_show_mb").show()) {
  $("span.menu_click").hide();
  $("span.menu_close").show();
} else if ($(".menu_show_mb").hide()) {
  $("span.menu_click").show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu_icon_mb">
  <span class="menu_click"><i class="fa fa-bars" aria-hidden="true"></i></span>
  <span class="menu_close" style="display:none;">X</span>
  <div class="menu_show_mb">
    The list of content
  </div>
</div>