Javascript：扩展框切换按钮

Question

what I am trying to do is an expanding box that expands and retracts with the press of the same button. I have the functions but I'm not sure where to go from here. I need to write some code that let's me run these functions with the same button, retract if it's expanded and vice-versa. How would I go about doing this?

Here's my functions:

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";
}

And here is the 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>

Very thankful for help!

Answer 1

You could add a function that checks your div height and decides whether to expand or retract accordingly, something similar to:

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

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

Answer 2

Combining the answer from ProfessorT, we can tie it all together with a data attribute and an event listener.

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);
}