ボタンをクリックして非表示だった要素を表示させる

jQueyでshow,hide,toggle

メモ

■HTML

<p>1+1=?</p>
<button class="answer_button">解答</button>
<div id="answer" class="dis_n">
<p>正解:2</p>
</div>

■CSS

.dis_n {
 display: none;
 }

■JavaScript

$(function(){
  $(".answer_button").on('click', function(){
    if($('#answer').css('display') == 'block'){
      $("#answer").hide();
    }else{
      $("#answer").show();
    }
  });
});

または

$(function(){
　$(".answer_button").on('click', function(){
　　$("#answer").toggle();	
});

---

↓解答ボタンをクリックすると

もう一度クリックすると非表示になる