javascript - Javascript の展開と折りたたみ

Question

JavaScript のドラッグ アンド ドロップ機能を使用して、コンテンツを展開したり折りたたんだりしています。以下は私のコードです。

<script type="text/javascript">

    function toggle_visibility(id) {
       var e = document.getElementById(id);

       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }

</script>

<a href="#" onclick="toggle_visibility('id1');" ><div class="gap">Click here to toggle visibility of element #foo</div></a>

<div id="id1" style="display:none;">This is foo</div>


<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">Click here to see wonder</div></a>
<a href="#"  onclick="toggle_visibility('id3');">Edit</a>
<div id="id2">This is foo</div>
<div id="id3">Edit</div>

問題は、[編集] セクションをクリックすると表示されるはずです。現在、編集と foo の両方が表示されています...

これを行うための正しいコードを教えてください。

前もって感謝します..