How to fix it?

В чем проблема: При нажатии кнопки "Показать QR", Верно показывается QR для блока на который нажимал, при этом, 2 остальных блока выезжают вместе с тем что был нужен.
Как нужно: Нажал на кнопку "Показать QR" на lolz - выезжает блок и показывается QR только у этого блока.

скрин

html

<div id="links" class="tab">
<div class="cards">
<div class="card">
<h3>telegram</h3>
<p>@ammcngg</p>
<button onclick="window.open('https://t.me/ammcngg')">Перейти</button>
<button onclick="toggleQR(this)">Показать QR</button>
<div class="qr-block">
<img src="qrcodes/telegram.png" alt="Telegram QR">
<button class="close-btn" onclick="toggleQR(this.parentElement)">Свернуть</button>
</div>
</div>

<div class="card">
<h3>lolz</h3>
<p>profile</p>
<button onclick="window.open('https://lolz.live/members/9540954/')">Перейти</button>
<button onclick="toggleQR(this)">Показать QR</button>
<div class="qr-block">
<img src="qrcodes/lolz.png" alt="LOLZ QR">
<button class="close-btn" onclick="toggleQR(this.parentElement)">Свернуть</button>
</div>
</div>

<div class="card">
<h3>github</h3>
<p>verplyofficial</p>
<button onclick="window.open('https://github.com/verplyofficial')">Перейти</button>
<button onclick="toggleQR(this)">Показать QR</button>
<div class="qr-block">
<img src="qrcodes/github.png" alt="GitHub QR">
<button class="close-btn" onclick="toggleQR(this.parentElement)">Свернуть</button>
</div>
</div>
</div>
</div>

HTML

<div id="links" class="tab">

            <div class="cards">

                <div class="card">

                    <h3>telegram</h3>

                    <p>@ammcngg</p>

                    <button onclick="window.open('https://t.me/ammcngg')">Перейти</button>

                    <button onclick="toggleQR(this)">Показать QR</button>

                    <div class="qr-block">

                        <img src="qrcodes/telegram.png" alt="Telegram QR">

                        <button class="close-btn" onclick="toggleQR(this.parentElement)">Свернуть</button>

                    </div>

                </div>



                <div class="card">

                    <h3>lolz</h3>

                    <p>profile</p>

                    <button onclick="window.open('https://lolz.live/members/9540954/')">Перейти</button>

                    <button onclick="toggleQR(this)">Показать QR</button>

                    <div class="qr-block">

                        <img src="qrcodes/lolz.png" alt="LOLZ QR">

                        <button class="close-btn" onclick="toggleQR(this.parentElement)">Свернуть</button>

                    </div>

                </div>



                <div class="card">

                    <h3>github</h3>

                    <p>verplyofficial</p>

                    <button onclick="window.open('https://github.com/verplyofficial')">Перейти</button>

                    <button onclick="toggleQR(this)">Показать QR</button>

                    <div class="qr-block">

                        <img src="qrcodes/github.png" alt="GitHub QR">

                        <button class="close-btn" onclick="toggleQR(this.parentElement)">Свернуть</button>

                    </div>

                </div>

            </div>

        </div>

css

.qr-block {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
padding: 0 10px;
text-align: center;
border: 1px solid #555;
margin-top: 10px;
background: #111;
}

.qr-block.show {
max-height: 500px;
padding: 10px;
}

.qr-block img {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 10px auto;
}

.qr-block .close-btn {
margin-top: 5px;
padding: 5px 10px;
cursor: pointer;
background: none;
border: 1px solid #fff;
color: #fff;
}

CSS

.qr-block {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.5s ease, padding 0.5s ease;

    padding: 0 10px;

    text-align: center;

    border: 1px solid #555;

    margin-top: 10px;

    background: #111;

}



.qr-block.show {

    max-height: 500px;

    padding: 10px;

}



.qr-block img {

    width: 120px;

    height: 120px;

    display: block;

    margin: 0 auto 10px auto;

}



.qr-block .close-btn {

    margin-top: 5px;

    padding: 5px 10px;

    cursor: pointer;

    background: none;

    border: 1px solid #fff;

    color: #fff;

}

js

function toggleQR(buttonOrBlock) {
let qr;
if (buttonOrBlock.tagName === 'BUTTON') {
qr = buttonOrBlock.nextElementSibling;
} else {
qr = buttonOrBlock;
}
qr.classList.toggle('show');
}

JS

function toggleQR(buttonOrBlock) {

    let qr;

    if (buttonOrBlock.tagName === 'BUTTON') {

        qr = buttonOrBlock.nextElementSibling;

    } else {

        qr = buttonOrBlock;

    }

    qr.classList.toggle('show');

}