Collapsible div pushing down the next row of div-CodePudding

I'm not very good at css but i need to solve some alignment issues with Collapsible div. Below HTML portion is in while loop and I have multiple rows of div and each row has 2 div. When clicking on 1st div on the 1st row it is expanding and pushing down the 1st div of 2nd row which is correct but along with this 2nd div of 2nd row also moving down.

<div class="cards">
    <div class="Interview" id="Interview">
        <?php while ($Interview_Details) { ?>
            <div class="card01">
                <div class="collapsible">
                    <div class="image"><img src="<?php echo "/images/people/" . $Interview_Details['Photo']; ?>"/></div>
                    <div class="interview"><?php echo $Interview_Details['shortDesc']; ?>
                    </div>
                </div>
                <div class="content">
                    <p><?php echo $Interview_Details['LongDesc']; ?></p>
                    <div class="padding10">&nbsp;</div>
                </div>
            </div>
        <?php } ?>
    </div>
</div>

.card01{
    width: 47%;
    height: auto;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    vertical-align: top;
    min-height: 220px;
    background: rgb(255, 255, 255);
}
.content {
    max-height: 0px;
    padding: 0px 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out 0s;
}

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i  ) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight   "px";
        }
    });
}
</script>

CodePudding user response：

Define a class for Expand/Collapse

CSS

.card01 .content {
    height: 0;
    transition: 100%;
}

.card01 .content.active {
    height: auto;
}

Javascript

const cards = document.querySelectorAll("#Interview .card01")

cards.forEach(e => {
    e.addEventListener("click", () => {
        e.classList.toggle("active");

        cards.forEach(el => {
            if (el !== e) el.classList.remove("active");
        });
    });
});

CodePudding user response：

The class card01 can only appear once per column... meaning each column has it's own container. Here is a snippet to see how the HTML should look.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i  ) {
    coll[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight   "px";
        }
    });
}

.card01{
    width: 47%;
    height: auto;
    position: relative;
    display: inline-block;
    margin-top: 20px;
    vertical-align: top;
    min-height: 220px;
    background: rgb(255, 255, 255);
}
.content {
    max-height: 0px;
    padding: 0px 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out 0s;
}

<div class="card01">
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
</div>

<div class="card01">
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
  <div class="collapsible">
    <div class="image"><img src="/images/people/" /></div>
    <div class="interview">This is a short description</div>
  </div>
  <div class="content">
    <p>This is a long description. This is a long description. This is a long description</p>
    <div class="padding10">&nbsp;</div>
  </div>
</div>