Title: JavaScript is working and doesn't at the same time
Tags: javascript;html;css
Question: I have the following task, I need to make a 2x2 table and each tile of that table has a button that should open the hidden div that contains the iframe. If an iframe is opened, the grid-template-columns and grid-template-rows are changed. From 30vw 30vw for columns, and 20vh 20vh for rows, to 95vw for columns, and optionally for rows. Variationally -
if, for example, I opened the first frame, but at the same time I already had the third one open, then my grid-template-rows will be 110vh 20vh 110vh 20vh, and if I open only the first, then 110vh 20vh 20vh 20vh, respectively. Before I tried to do variable height of lines, everything worked for me,
the width and height of the first container decreased and increased, the iframe appeared, but as soon as I wrote the code for variability, everything broke at once: the iframe does not appear, the width increases but does not decrease, the height increases only for 1 element ...
The logic of my js is as follows: Check if that element is hidden,
for which the button that called the method is responsible, if yes, then we look at which iframs have already been shown, and depending on this we set the line height and set ```display: block;```. If this element is shown, then we do the same thing, but set display: none;
Here is a piece of html code:
```<div id=&quot;projects-grid&quot;&gt;
        <div class=&quot;project-tile&quot;&gt;
            <a href=&quot;&quot;&gt;
                <button class=&quot;a-btn&quot;&gt;
                    <h2&gt;Go to Tribute page</h2&gt;
                </button&gt;
            </a&gt;
            <button class=&quot;show-btn&quot; onclick=&quot;firstBtnClick()&quot;&gt;
                <p id=&quot;first-show-p&quot;&gt;Click to open site</p&gt;
            </button&gt;
            <div id=&quot;first-hidden&quot;&gt;
                <img src=&quot;https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png&quot; alt=&quot;&quot;&gt;
                <!-- <iframe src=&quot;https://codepen.io/YouAreMe12/full/bGRdxZg&quot; frameborder=&quot;0&quot;&gt;</iframe&gt; --&gt;
            </div&gt;
        </div&gt;
        <div class=&quot;project-tile&quot;&gt;
            <a href=&quot;&quot;&gt;
                <button class=&quot;a-btn&quot;&gt;
                    <h2&gt;Survey form</h2&gt;
                </button&gt;
            </a&gt;
            <button class=&quot;show-btn&quot; onclick=&quot;secondBtnClick()&quot;&gt;
                <p class=&quot;show-para&quot;&gt;Click to open site</p&gt;
            </button&gt;
            <div id=&quot;second-hidden&quot;&gt;
                <img src=&quot;https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png&quot; alt=&quot;&quot;&gt;
            </div&gt;
        </div&gt;
        <div class=&quot;project-tile&quot;&gt;
            <a href=&quot;&quot;&gt;
                <button class=&quot;a-btn&quot;&gt;
                    <h2&gt;Product landing page</h2&gt;
                </button&gt;
            </a&gt;
            <button class=&quot;show-btn&quot; onclick=&quot;thirdBtnClick()&quot;&gt;
                <p class=&quot;show-para&quot;&gt;Click to open site</p&gt;
            </button&gt;
            <div id=&quot;third-hidden&quot;&gt;
                <img src=&quot;https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png&quot; alt=&quot;&quot;&gt;
            </div&gt;
        </div&gt;
        <div class=&quot;project-tile&quot;&gt;
            <a href=&quot;&quot;&gt;
                <button class=&quot;a-btn&quot;&gt;
                    <h2&gt;Technical documentation page</h2&gt;
                </button&gt;
            </a&gt;
            <button class=&quot;show-btn&quot; onclick=&quot;forthBtnClick()&quot;&gt;
                <p class=&quot;show-para&quot;&gt;Click to open site</p&gt;
            </button&gt;
            <div id=&quot;forth-hidden&quot;&gt;
                <img src=&quot;https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png&quot; alt=&quot;&quot;&gt;
            </div&gt;
        </div&gt;
    </div&gt;
```
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);
}
```
and JS with responsive height:
```    function firstBtnClick() {
    //start
    if (document.getElementById(&quot;first-hidden&quot;).style.display == &quot;none&quot;) {
        //second is shown
        if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
            //second and third
            if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                //and also forth
                if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 20vh&quot;;
                //second and forth
            } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 20vh&quot;;
            //second is hidden third is shown
        } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            //third and forth
            if (!document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 20vh&quot;;
            //only forth
        } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 20vh&quot;;
        document.getElementById(&quot;first-show-p&quot;).textContent = &quot;Click to hide site&quot;;
        document.getElementById(&quot;first-hidden&quot;).style.display = &quot;block&quot;;
    } else {
        //column check
        if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;95vw&quot;;
        }else{
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;30vw 30vw&quot;;
        }
        //second
        if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
            //second and third
            if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                //also forth
                if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 20vh&quot;;
                //second and forth
            } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 110vh&quot;;
            }
            //only second
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 20vh&quot;;
            //third
        } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            //third and forth
            if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 110vh&quot;;
            }
            //only third
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 20vh&quot;;
            //forth
        } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 20vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh&quot;;
        document.getElementById(&quot;first-show-p&quot;).textContent = &quot;Click to open site&quot;;
        document.getElementById(&quot;second-hidden&quot;).style.display = &quot;none&quot;;
    }
}
function secondBtnClick() {
    //start
    if (document.getElementById(&quot;second-hidden&quot;).style.display == &quot;none&quot;) {
        //first is shown
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot;) {
            //first and third
            if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                //and also forth
                if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 20vh&quot;;
                //first and forth
            } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 20vh&quot;;
            //first is hidden third is shown
        } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            //third and forth
            if (!document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 20vh&quot;;
            //only forth
        } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 20vh&quot;;
        document.getElementById(&quot;second-show-p&quot;).textContent = &quot;Click to hide site&quot;;
        document.getElementById(&quot;second-hidden&quot;).style.display = &quot;block&quot;;
    } else {
        //column check
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;95vw&quot;;
        }else{
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;30vw 30vw&quot;;
        }
        //first
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot;) {
            //first and third
            if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                //also forth
                if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 20vh&quot;;
                //first and forth
            } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 110vh&quot;;
            }
            //only first
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 20vh&quot;;
            //third
        } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            //third and forth
            if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 110vh&quot;;
            }
            //only third
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 20vh&quot;;
            //forth
        } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 20vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh&quot;;
        document.getElementById(&quot;second-show-p&quot;).textContent = &quot;Click to open site&quot;;
        document.getElementById(&quot;second-hidden&quot;).style.display = &quot;none&quot;;
    }
}
function thirdBtnClick() {
    //start
    if (document.getElementById(&quot;third-hidden&quot;).style.display == &quot;none&quot;) {
        //first is shown
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot;) {
            //first and second
            if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
                //and also forth
                if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 20vh&quot;;
                //first and forth
            } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 20vh&quot;;
            //first is hidden second is shown
        } else if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
            //second and forth
            if (!document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 20vh&quot;;
            //only forth
        } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 20vh&quot;;
        document.getElementById(&quot;third-show-p&quot;).textContent = &quot;Click to hide site&quot;;
        document.getElementById(&quot;third-hidden&quot;).style.display = &quot;block&quot;;
    } else {
        //column check
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;95vw&quot;;
        }else{
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;30vw 30vw&quot;;
        }
        //first
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot;) {
            //first and second
            if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
                //also forth
                if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 20vh&quot;;
                //first and forth
            } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 110vh&quot;;
            }
            //only first
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 20vh&quot;;
            //second
        } else if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
            //second and forth
            if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 110vh&quot;;
            }
            //only second
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 20vh&quot;;
            //forth
        } else if (document.getElementById(&quot;forth-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 20vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh&quot;;
        document.getElementById(&quot;third-show-p&quot;).textContent = &quot;Click to open site&quot;;
        document.getElementById(&quot;third-hidden&quot;).style.display = &quot;none&quot;;
    }
}
function forthBtnClick() {
    //start
    if (document.getElementById(&quot;forth-hidden&quot;).style.display == &quot;none&quot;) {
        //first is shown
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot;) {
            //first and second
            if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
                //and also third
                if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 110vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 110vh&quot;;
                //first and third
            } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 110vh&quot;;
            //first is hidden second is shown
        } else if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
            //second and third
            if (!document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 110vh&quot;;
            }
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 110vh&quot;;
            //only third
        } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 110vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 20vh 110vh&quot;;
        document.getElementById(&quot;forth-show-p&quot;).textContent = &quot;Click to hide site&quot;;
        document.getElementById(&quot;forth-hidden&quot;).style.display = &quot;block&quot;;
    } else {
        //column check
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot; ||
            document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;95vw&quot;;
        }else{
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;30vw 30vw&quot;;
        }
        //first
        if (document.getElementById(&quot;first-hidden&quot;).style.display != &quot;none&quot;) {
            //first and second
            if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
                //also third
                if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 110vh 20vh&quot;;
                }
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 110vh 20vh 20vh&quot;;
                //first and third
            } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 110vh 20vh&quot;;
            }
            //only first
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 20vh&quot;;
            //second
        } else if (document.getElementById(&quot;second-hidden&quot;).style.display != &quot;none&quot;) {
            //second and third
            if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
                document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 110vh 20vh&quot;;
            }
            //only second
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 110vh 20vh 20vh&quot;;
            //third
        } else if (document.getElementById(&quot;third-hidden&quot;).style.display != &quot;none&quot;) {
            document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh 110vh 20vh&quot;;
        }
        document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh&quot;;
        document.getElementById(&quot;forth-show-p&quot;).textContent = &quot;Click to open site&quot;;
        document.getElementById(&quot;forth-hidden&quot;).style.display = &quot;none&quot;;
    }
}
```
And without:
```function btnClick(){
if (document.getElementById(&quot;first-hidden&quot;).style.display == &quot;none&quot;) {
    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;95vw&quot;;
    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;110vh 20vh 20vh 20vh&quot;;
    document.getElementById(&quot;first-hidden&quot;).style.display = &quot;block&quot;;
}else {
    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateColumns = &quot;30vw 30vw&quot;;
    document.getElementById(&quot;projects-grid&quot;).style.gridTemplateRows = &quot;20vh 20vh&quot;;
    document.getElementById(&quot;first-hidden&quot;).style.display = &quot;none&quot;;
}
```




{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:10/08/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><css>', 'Title': "JavaScript is working and doesn't at the same time", 'ViewCount': 39, 'id': 69495014, 'user_AboutMe': None, 'user_AccountId': 21806266.0, 'user_DisplayName': 'Богдан Иманкулов', 'user_Reputation': 50.0, 'user_Views': 12.0, 'user_id': 16104419.0}}