HTMLの展開ボタンタグについて

###前提・実現したいこと
HTML初心者です。
HTMLを使って、HPのQ&Aコーナーのページを見やすくしたいと考えております。
具体的には、質問をクリックすると、それに対する回答が展開・収納するような形にしたいです。

###発生している問題・エラーメッセージ
質問が1つだけの場合は上手く動作する（回答が表示される）のですが、複数個の質問を設定しようとすると上手くいきません。
具体的には、質問１〜１０と、それに対応する回答１〜１０があった場合に、
質問1をクリックすると回答1が展開されるのですが、
質問2〜10と回答2〜10に関しては、質問2〜10と回答2〜10がともに表示された状態で、
質問をクリックしても、回答が展開・収納ができません。

<div onclick="obj=document.getElementById('menu1').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;"><b>質問1</b></a>
</div>
<div id="menu1" style="display:none;clear:both;"> 
<b>A.</b>回答1
</div>

<div onclick="obj=document.getElementById('menu2’).style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;"><b>質問2</b></a>
</div>
<div id="menu2” style="display:none;clear:both;"> 
<b>A.</b> 回答2
</div>

<div onclick="obj=document.getElementById('menu3’).style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;"><b>質問3</b></a>
</div>
<div id="menu3” style="display:none;clear:both;"> 
<b>A.</b>回答3</div>