jQuery3 show() method

以下は、jQuery3.3.1 で表示・非表示する div 要素（.box）の display の値を色々と変えて show(), hide(), toggle() を実行するサンプルです。それぞれのメソッドを実行後、その要素の display の値を取得して表示しています。

HTML & CSS

<div class="sample" id="box1">
  <p class="display">CSS display: <span></span></p>
  <div class="pre">
    <pre>省略</pre>
  </div>
  <button class="show">show</button>
  <button class="hide">hide</button>
  <button class="toggle">toggle</button>
  <div class="box"></div>
</div> 

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .sample {
    margin: 50px 0;
    height: 450px;
  }
  #box1 .box {
    display: none;
  }
  #box2 .box {
    display: block;
  }
  #box3 .box {
    display: inline;
  }
  #box4 .box {
    display: inline-block;
  }
  #box5 .box {
    display: table;
  }
  .hidden {
    display: none;
  }
</style>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script>
$(function(){ 
  $(".sample .display span").each(function() {
    $(this).text($(this).closest(".sample").find(".box").css("display"));
  });   
  function update_display_value(this$) {
    var box = this$.closest(".sample").find(".box");
    var span = this$.closest(".sample").find(".display span");
    span.text(box.css("display"));
  }

  $("#box1 .show").click(function(){
    $("#box1 .box").show();
    update_display_value($(this));
  });
  $("#box1 .hide").click(function(){
    $("#box1 .box").hide();
    update_display_value($(this));
  });
  $("#box1 .toggle").click(function(){
    $("#box1 .box").toggle();
    update_display_value($(this));
  });
}); 
</script>

CSS display:

<div id="box1">
  <div class="box"></div>
</div>

初期 CSS 設定
#box1 .box {
  display: none;
}

CSS display:

<div id="box2">
  <div class="box"></div>
</div>

初期 CSS 設定
#box2 .box {
  display: block;
}

CSS display:

<div id="box3">
  <div class="box">inline</div>
</div>

初期 CSS 設定
#box3 .box {
  display: inline;
}

inline

CSS display:

<div id="box4">
  <div class="box"></div>
</div>

初期 CSS 設定
#box4 .box {
  display: inline-block;
}

CSS display:

<div id="box5">
  <div class="box"></div>
</div>

初期 CSS 設定
#box5 .box {
  display: table;
}

CSS display:

<div id="box6">
  <div class="box" style="display:none"></div>
</div>

初期 CSS 設定
#box6 .box {
  インラインで要素に display:none を指定
}

CSS display:

<div id="box7">
  <div class="box hidden"></div>
</div>

初期 CSS 設定
以下のクラス（.hidden）を要素に適用
.hidden {
  display:none; 
}

以下は、スピードを "slow" に指定して、コールバック関数で display の値を確認する例です。表示・非表示する div 要素の display の初期値は none です。

$("#box8 .hide").click(function(){
  $("#box8 .box").hide('slow', function(){
    update_display_value($(this));
  }); 
});
$("#box8 .show").click(function(){
  $("#box8 .box").show('slow', function(){
    update_display_value($(this));
  });
});
$("#box8 .toggle").click(function(){
  $("#box8 .box").toggle('slow', function() {
    update_display_value($(this));
  });
});

CSS display:

<div id="box1">
  <div class="box"></div>
</div>

初期 CSS 設定
#box8 .box {
  display: none;
}

jQuery3.3.1 show(), hide(), toggle()