ผมทำ Script ที่ซ่อน DIV แต่ปัญหาคือเวลาทุกครั้งที่กด ปุ่มมันจะเด้งขึ้นไปบนสุดตลอด สามารถแก้ได้ยังไงครับ

	<div class="form-group row mb-0 pb-0">
		<div class="col-2"><h5>Example 1 </h5></div>
            <div>
                <a href='#' onclick="toggle_visibility('foo');">
                <button type='button'>Detail Example 1</button>
                </a>
            </div>
	    </div>
	    <div id="foo" style="display: none;">
		<table>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
            <tr><td>Example 1</td></tr>
        </table>
	    </div>
	</div>
    <div class="form-group row mb-0 pb-0">
		<div class="col-2"><h5>Example 2 </h5></div>
            <div>
                <a href='#' onclick="toggle_visibility('foo2');">
                <button type='button'>Detail Example 2</button>
                </a>
            </div>
	    </div>
	    <div id="foo2" style="display: none;">
		<table>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
            <tr><td>Example 2</td></tr>
        </table>
	    </div>
	</div>
    <div class="form-group row mb-0 pb-0">
		<div class="col-2"><h5>Example 3 </h5></div>
            <div>
                <a href='#' onclick="toggle_visibility('foo3');">
                <button type='button'>Detail Example 3</button>
                </a>
            </div>
	    </div>
	    <div id="foo3" style="display: none;">
		<table>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
            <tr><td>Example 3</td></tr>
        </table>
	    </div>
	</div>
				<script type="text/javascript">
					function toggle_visibility(id) {
					var e = document.getElementById(id);
					if(e.style.display == '')
						e.style.display = 'none';
						
					else
						e.style.display = '';
					}
				</script>