Q:

show div boxes when buttons are clicked

Still getting my head around the code here.  I'd like to be able to show a series of 'answers' when questions are clicked.  The questions are buttons, and the answers are divs.  Any help would be gratefully received. 
<h4 class="JCU-title">
<button  onclick="javascript:showDiv(answer1);">The</button>
<button  onclick="javascript:showDiv(answer2);">girl</button>
<button  onclick="javascript:showDiv(answer3);">plays</button>
<button  onclick="javascript:showDiv(answer4);">soccer</button>
</h4>

<! --show (toggle?)  only one answer div box at a time-->
<div id="answer0">blank</div>
<div id="answer1">the is a determiner</div>
<div id="answer2">girl is a common noun </div>
<div id="answer3">play is a verb.</div>
<div id="answer4">Soccer common noun.</div>

A:

function showDiv(id){ 
  $(".answer").hide();
  $("#"+id).show();
}
.answer{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4 class="JCU-title">
<button  onclick="showDiv('answer1');">The</button>
<button  onclick="showDiv('answer2');">girl</button>
<button  onclick="showDiv('answer3');">plays</button>
<button  onclick="showDiv('answer4');">soccer</button>
</h4>

<! --show (toggle?)  only one answer div box at a time-->
<div id="answer0" class="answer">blank</div>
<div id="answer1" class="answer">the is a determiner</div>
<div id="answer2" class="answer">girl is a common noun </div>
<div id="answer3" class="answer">play is a verb.</div>
<div id="answer4" class="answer">Soccer common noun.</div>

