У меня следующая задача, мне нужно сделать таблицу 2х2, и у каждой плитки этой таблицы есть кнопка, которая должна открыть скрытый div, в котором iframe. Если открывается iframe, то меняется grid-template-columns и grid-template-rows. С 30vw 30vw для столбцов, и 20vh 20vh для строк, на 95vw для столбцов, и вариативно для строк. Вариативно - это если к примеру я открыл первый фрейм, но при этом у меня уже был открыт третий, то мой grid-template-rows будет равен 110vh 20vh 110vh 20vh, а если я открываю только первый, то соответственно 110vh 20vh 20vh 20vh. До того как попытался сделать вариативную высоту строк, у меня все работало, ширина и высота первого контейнера уменьшалась и увеличивалась, iframe появлялся, но как только написал код на вариативность, сразу все поломалось: iframe не появляется, ширина увеличивается, но не уменьшается, высота увеличивается только у 1 элемента...
Логика моего js следующая: Проверяем, скрыт ли тот элемент, за который отвечает кнопка вызвавшая метод, если да, то смотрим, какие ifram'ы уже были показаны, и в зависимости от этого выставляем высоту строки, и ставим display: block;
. Если же этот элемент показан, то делаем все тоже самое, но выставляем display: none;
Вот кусок html кода:
<div id="projects-grid">
<div class="project-tile">
<a href="">
<button class="a-btn">
<h2>Go to Tribute page</h2>
</button>
</a>
<button class="show-btn" onclick="firstBtnClick()">
<p id="first-show-p">Click to open site</p>
</button>
<div id="first-hidden">
<img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
<!-- <iframe src="https://codepen.io/YouAreMe12/full/bGRdxZg" frameborder="0"></iframe> -->
</div>
</div>
<div class="project-tile">
<a href="">
<button class="a-btn">
<h2>Survey form</h2>
</button>
</a>
<button class="show-btn" onclick="secondBtnClick()">
<p class="show-para">Click to open site</p>
</button>
<div id="second-hidden">
<img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
</div>
</div>
<div class="project-tile">
<a href="">
<button class="a-btn">
<h2>Product landing page</h2>
</button>
</a>
<button class="show-btn" onclick="thirdBtnClick()">
<p class="show-para">Click to open site</p>
</button>
<div id="third-hidden">
<img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
</div>
</div>
<div class="project-tile">
<a href="">
<button class="a-btn">
<h2>Technical documentation page</h2>
</button>
</a>
<button class="show-btn" onclick="forthBtnClick()">
<p class="show-para">Click to open site</p>
</button>
<div id="forth-hidden">
<img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
</div>
</div>
</div>
Css:
#projects-grid {
display: grid;
grid-template-columns: 30vw 30vw;
grid-template-rows: 20vh 20vh;
grid-gap: 9rem;
margin: 0 auto;
margin-bottom: 6rem;
}
.project-tile {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 6px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
border: 1px solid cyan;
}
#first-hidden {
pad: var(--main-cyan);
display: none;
}
#second-hidden {
display: none;
}
#third-hidden {
display: none;
}
#forth-hidden {
display: none;
}
iframe {
border-radius: 5px;
width: 87vw;
height: 89vh;
border-bottom: 7px solid var(--main-white);
}
и JS с адаптивной высотой:
function firstBtnClick() {
//start
if (document.getElementById("first-hidden").style.display == "none") {
//second is shown
if (document.getElementById("second-hidden").style.display != "none") {
//second and third
if (document.getElementById("third-hidden").style.display != "none") {
//and also forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
//second and forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
//second is hidden third is shown
} else if (document.getElementById("third-hidden").style.display != "none") {
//third and forth
if (!document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
//only forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
document.getElementById("first-show-p").textContent = "Click to hide site";
document.getElementById("first-hidden").style.display = "block";
} else {
//column check
if (document.getElementById("second-hidden").style.display != "none" ||
document.getElementById("third-hidden").style.display != "none" ||
document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
}else{
document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
}
//second
if (document.getElementById("second-hidden").style.display != "none") {
//second and third
if (document.getElementById("third-hidden").style.display != "none") {
//also forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
//second and forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
}
//only second
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
//third
} else if (document.getElementById("third-hidden").style.display != "none") {
//third and forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
}
//only third
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
//forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
document.getElementById("first-show-p").textContent = "Click to open site";
document.getElementById("second-hidden").style.display = "none";
}
}
function secondBtnClick() {
//start
if (document.getElementById("second-hidden").style.display == "none") {
//first is shown
if (document.getElementById("first-hidden").style.display != "none") {
//first and third
if (document.getElementById("third-hidden").style.display != "none") {
//and also forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
//first and forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
//first is hidden third is shown
} else if (document.getElementById("third-hidden").style.display != "none") {
//third and forth
if (!document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
//only forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
document.getElementById("second-show-p").textContent = "Click to hide site";
document.getElementById("second-hidden").style.display = "block";
} else {
//column check
if (document.getElementById("first-hidden").style.display != "none" ||
document.getElementById("third-hidden").style.display != "none" ||
document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
}else{
document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
}
//first
if (document.getElementById("first-hidden").style.display != "none") {
//first and third
if (document.getElementById("third-hidden").style.display != "none") {
//also forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
//first and forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
}
//only first
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
//third
} else if (document.getElementById("third-hidden").style.display != "none") {
//third and forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
}
//only third
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
//forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
document.getElementById("second-show-p").textContent = "Click to open site";
document.getElementById("second-hidden").style.display = "none";
}
}
function thirdBtnClick() {
//start
if (document.getElementById("third-hidden").style.display == "none") {
//first is shown
if (document.getElementById("first-hidden").style.display != "none") {
//first and second
if (document.getElementById("second-hidden").style.display != "none") {
//and also forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
//first and forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
//first is hidden second is shown
} else if (document.getElementById("second-hidden").style.display != "none") {
//second and forth
if (!document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
//only forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
document.getElementById("third-show-p").textContent = "Click to hide site";
document.getElementById("third-hidden").style.display = "block";
} else {
//column check
if (document.getElementById("first-hidden").style.display != "none" ||
document.getElementById("second-hidden").style.display != "none" ||
document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
}else{
document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
}
//first
if (document.getElementById("first-hidden").style.display != "none") {
//first and second
if (document.getElementById("second-hidden").style.display != "none") {
//also forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
//first and forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
}
//only first
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
//second
} else if (document.getElementById("second-hidden").style.display != "none") {
//second and forth
if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
}
//only second
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
//forth
} else if (document.getElementById("forth-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
document.getElementById("third-show-p").textContent = "Click to open site";
document.getElementById("third-hidden").style.display = "none";
}
}
function forthBtnClick() {
//start
if (document.getElementById("forth-hidden").style.display == "none") {
//first is shown
if (document.getElementById("first-hidden").style.display != "none") {
//first and second
if (document.getElementById("second-hidden").style.display != "none") {
//and also third
if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 110vh";
//first and third
} else if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 110vh";
//first is hidden second is shown
} else if (document.getElementById("second-hidden").style.display != "none") {
//second and third
if (!document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 110vh";
//only third
} else if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 110vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 20vh 110vh";
document.getElementById("forth-show-p").textContent = "Click to hide site";
document.getElementById("forth-hidden").style.display = "block";
} else {
//column check
if (document.getElementById("first-hidden").style.display != "none" ||
document.getElementById("second-hidden").style.display != "none" ||
document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
}else{
document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
}
//first
if (document.getElementById("first-hidden").style.display != "none") {
//first and second
if (document.getElementById("second-hidden").style.display != "none") {
//also third
if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 110vh 20vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 110vh 20vh 20vh";
//first and third
} else if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 110vh 20vh";
}
//only first
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
//second
} else if (document.getElementById("second-hidden").style.display != "none") {
//second and third
if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 110vh 20vh";
}
//only second
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 110vh 20vh 20vh";
//third
} else if (document.getElementById("third-hidden").style.display != "none") {
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh 110vh 20vh";
}
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
document.getElementById("forth-show-p").textContent = "Click to open site";
document.getElementById("forth-hidden").style.display = "none";
}
}
И без:
function btnClick(){
if (document.getElementById("first-hidden").style.display == "none") {
document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
document.getElementById("projects-grid").style.gridTemplateRows = "110vh 20vh 20vh 20vh";
document.getElementById("first-hidden").style.display = "block";
}else {
document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
document.getElementById("first-hidden").style.display = "none";
}
}