Как убрать активный класс с элемента при клике, если он уже имеет этот класс?

Не получается найти ошибку, почему класс не убирается при клике на элемент который уже имеет этот класс html:

       <div class="panel">
            <div class="panel-heading"><h4>panel 1</h4></div>
            <div class="panel-collapse">
                <div class="panel-body">
                    <p>1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch..</p>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panel-heading"><h4>panel 2</h4></div>
            <div class="panel-collapse">
                <div class="panel-body">
                    <p>2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p>
                </div>
            </div>
        </div>

js:

function ready() {
    var panels = document.getElementsByClassName("panel");
    var i;
    for (i = 0; panels.length > i; i++) {
        panels[i].onclick = function() {
            for (i = 0; panels.length > i; i++) {
                panels[i].classList.remove("active");
            }
            if (this.classList.contains("active")) {
                this.classList.remove("active")
            } else {
                this.classList.add("active")
            }
        };
    }
}
document.addEventListener("DOMContentLoaded", ready);