Readmore / readless内容切换功能

Question

我想要完成的是一个java readmore / readless内容切换功能，当一个内容的onclick触发时禁用其他内容。我正在使用getElementsByClassName，setTimeout和transition。

我遇到的问题是显示：none没有响应setTimeout。任何javascript之外的建议也是受欢迎的。

这是Javascript：

function toggle(cont, tog, id) {
    for (var i = 0; i < cont.length; i++) {
        if (tog[id].innerHTML != "Click Here to Read Less!") {
            /* Toggle On */
            tog[id].innerHTML = "Click Here to Read Less!";
            cont[id].style.height = "250px";

            /* Disable other  */
            setTimeout(function () { cont[i].style.display = "none" }, 500);
            setTimeout(function () { tog[i].style.display = "none" }, 500);

            for (var x = 0; x < cont.length; x++) {
                cont[x].style.opacity = "0";
                tog[x].style.opacity = "0";
                setTimeout(function () { cont[x].style.display = "none" }, 500);
                setTimeout(function () { tog[x].style.display = "none" }, 500);
                if (cont[id] == cont[x]) {
                    cont[id].style.opacity = "1";
                    tog[id].style.opacity = "1";
                }
            }
        } else {
            /* Toggle Off */
            tog[id].innerHTML = "Click Here to Read More!";
            cont[id].style.height = "100px";

            /* Enable other */
            for (var x = 0; x < cont.length; x++) {
                cont[x].style.opacity = "1";
                tog[x].style.opacity = "1";
                cont[x].style.display = "block";
                tog[x].style.display = "block";
            }
        }
    }
}

这是我的HTML：

        <div class="content">
        <p>
            Content Here!
        </p>
    </div>
    <a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 0)" class="readtoggle">Click Here to Read More!</a>

    <div class="content">
        <p>
            Content Here!
        </p>
    </div>
    <a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 1)" class="readtoggle">Click Here to Read More!</a>

    <div class="content">
        <p>
            Content Here!
        </p>
    </div>
    <a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 2)" class="readtoggle">Click Here to Read More!</a>

用于格式化的CSS：

/* Centering Content */
    #wrapper {
        margin: 0 auto;
        height: auto;
        width: 70%;

        text-align: center;
        font-family: Sans-Serif, Calibri;
        }

    /* Styling Content */
    .content {
        padding: 25px 50px;
        margin: 0 auto;
        height: 100px;
        width: 500px;

        display: block;
        text-align: left;
        overflow: hidden;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        }