Javascript：展開框切換按鈕

Question

我想要做的是擴展框，可以按下同一個按鈕來展開和收回。我有這些功能，但我不知道該從哪裏出發。我需要編寫一些代碼，讓我用相同的按鈕來運行這些函數，如果它被展開，則收回，反之亦然。我會如何去做這件事？

這裏是我的功能：

function expand(element){ 
    var target = document.getElementById(element); 
    var h = target.offsetHeight; 
    var sh = target.scrollHeight; 
    var loopTimer = setTimeout('expand(\''+element+'\')',8); 

    if(h < sh){ 
     h += 5; 
    } 

    else { 
     clearTimeout(loopTimer); 
    } 

    target.style.height = h+"px"; 
} 

function retract(element){ 
    var target = document.getElementById(element); 
    var h = target.offsetHeight; 
    var loopTimer = setTimeout('retract(\''+element+'\')',8); 

    if(h > 0){ 
     h -= 5; 
    } 

    else { 
     target.style.height = "0px"; 
     clearTimeout(loopTimer); 
    } 

    target.style.height = h+"px"; 
} 

這裏是HTML

<p class="mbars"> 
     <a href="#">Togglebutton 1</a> 
</p> 
<div id="div1" class="mydivs"> 
    <p>Box 1 Content</p> 
    <p>Box 1 Content</p> 
    <p>Box 1 Content</p> 
</div> 

<p class="mbars"> 
    <a href="#">Togglebutton 2</a> 
</p> 
<div id="div2" class="mydivs"> 
    <p>Box 2 Content</p> 
    <p>Box 2 Content</p> 
    <p>Box 2 Content</p> 
    <p>Box 2 Content</p> 
    <p>Box 2 Content</p> 
</div> 

非常感謝幫助！

Answer 1

您可以添加，檢查你的DIV的高度，並決定是否擴大或相應收縮的功能，類似於：

function toggle(element) { 
     var target = document.getElementById(element); 
     var h = target.offsetHeight; 

     if(h < 5){ 
      expand(element); 
     } else { 
      retract(element); 
     } 
    } 

Answer 2

組合來自ProfessorT答案，我們可以用數據屬性一起配合這一切和一個事件監聽器。

HTML：

<a href="#" data-toggle-div='div1'>Togglebutton 1</a> 

的JavaScript：

function toggle(element) { 
    var target = document.getElementById(element); 
    var h = target.offsetHeight; 

    if(h < 5){ 
     expand(element); 
    } else { 
     retract(element); 
    } 
} 


document.querySelector('a').addEventListener('click', function (event) { 
    var id = event.target.getAttribute('data-toggle-div'); 
    toggle(id); 
}