Readmore/readless content toggle function

Question

What I'm trying to accomplish is a java readmore/readless content toggle function that disable other content when one content's onclick triggers. I'm using getElementsByClassName, setTimeout, and transition.

The problem I'm having is that display: none is not responding to setTimeout. Any suggestion outside of javascript is welcome too.

Here is the 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";
            }
        }
    }
}

Here is my 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>

And CSS for formatting sake:

/* 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;
        }