声明如果，折叠“功能”

Question

我想问一个关于陈述if（）{}的问题。

尝试使一些可折叠元素“一起工作”。当我按照自己喜欢的方式工作时，我已经到了这一点。例如：元素1展开，然后在单击时折叠，元素2在第一次单击时变为相同。想法是每当我点击元素1 时，如果元素2 被展开，它就会折叠而元素1 会扩展，与另一个相同。问题是，只要我在元素1 上单击 3 次（展开，折叠，展开或以其他方式），然后尝试点击元素2 它展开（折叠元素1）但没有显示表单（id：collapseTw）我放在那里。 ：d

var bodyModal = document.getElementsByClassName('modal-body')[0];
var bgButton = document.getElementsByClassName('buttonTypeBg')[1];
var bgButton2 = document.getElementsByClassName('buttonTypeBg')[2];
var bgButton3 = document.getElementsByClassName('buttonTypeBg')[3];
var collapseTw = document.getElementById('formToShow');

bodyModal.style.height = "155px";
collapseTw.style.display = "none";

function CollapsingText() {

    if (bodyModal.style.height === "155px" || collapseTw.style.display === "block") {
        $('.collapse').collapse('show');
        $('.collapseTwo').collapse('hide');
        bodyModal.style.height = "225px";
        bgButton.style.top = "80px"
        bgButton2.style.top = "90px";
        bgButton3.style.top = "100px";
        collapseTw.style.display = "none";
    }

    else {
        $('.collapse').collapse('hide');
        $('.collapseTwo').collapse('hide')
        bodyModal.style.height = "155px";
        bgButton.style.top = "10px";
        bgButton2.style.top = "20px";
        bgButton3.style.top = "30px";
        collapseTw.style.display = "none";
    }

}

function CollapsingBox() {

    if (collapseTw.style.display === "none" || bodyModal.style.height === "225px") {
        $('.collapseTwo').collapse('show');
        $('.collapse').collapse('hide');
        bodyModal.style.height = "355px";
        collapseTw.style.display = "block";
        bgButton.style.top = "10px";
        bgButton2.style.top = "20px";
        bgButton3.style.top = "30px";
    }

    else {
        $('.collapse').collapse('hide');
        $('.collapseTwo').collapse('hide');
        bodyModal.style.height = "155px";
        collapseTw.style.display = "none";
    }
}

添加图片：

[ 3

希望我足够清楚。

有人会善意地解释我在哪里犯了错误：？