jquery - divのリストで二重境界線を回避する方法

Question

FAQとして使用されるdivのリストがあります。div が互いの下にリストされている場合もあれば、それらの間にテキストがある場合もあります。それらが互いに下にリストされている場合、解決方法がわからない二重境界線でこの問題が発生します。

このフィドルを参照してください。

HTML

<div class="faq">
<div class="faqheader">Toggle 1</div>
  <div class="faqcontent">Content 1</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 2</div>
  <div class="faqcontent">Content 2</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 3</div>
  <div class="faqcontent">Content 3</div>
</div>

<div class="faq">
<div class="faqheader">Toggle 4</div>
  <div class="faqcontent">Content 4</div>
</div>

CSS

.faq {width:200px;border: 1px solid #ddd;}
.faqheader {height:20px;font-weight: bold;cursor: pointer;}
.faqcontent {display:none;height:50px;}

div には境界線が必要です。border:1px solid #ddd

div 間にテキストがある場合 (トグル 1 と 2)、境界線はきれいに見えますが、それらが接近している場合 (トグル 3 と 4) はあまり見栄えがよくありません。

マークアップを変更することは、現時点ではオプションではありません。それらは動的に生成されます。css または jquery でこの問題を解決する方法はありますか?