I have a layout with a grid of four rows. I have two components, the first take the 3 first row with a given width and place to the left, while the second fill the fourth row’s entire width.
My problem is that I want to make those components hideable, by clicking a button which is part of the component. I manage to get a solution for the left component but not for the bottom one:
<code>function hideShow(name) {
var x = document.getElementById(name);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}</code>
<code>function hideShow(name) {
var x = document.getElementById(name);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}</code>
function hideShow(name) {
var x = document.getElementById(name);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<code>.parent{
background: red;
height:400px;
width: 100%;
display: grid;
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.child1 {
position: relative;
grid-row: span 3 / span 3;
background: blue;
width: fit-content;
}
.child2{
position: relative;
grid-row-start: 4;
background: green;
}
#grandchild1 {
height:90%;
width: 100px;
background: yellow;
}
#grandchild2 {
height: 90%;
width: 90%;
background: orange;
}
.button1{
position: absolute;
top: 64px;
right: 0;
transform: translateX(50%);
}
.button2{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}</code>
<code>.parent{
background: red;
height:400px;
width: 100%;
display: grid;
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.child1 {
position: relative;
grid-row: span 3 / span 3;
background: blue;
width: fit-content;
}
.child2{
position: relative;
grid-row-start: 4;
background: green;
}
#grandchild1 {
height:90%;
width: 100px;
background: yellow;
}
#grandchild2 {
height: 90%;
width: 90%;
background: orange;
}
.button1{
position: absolute;
top: 64px;
right: 0;
transform: translateX(50%);
}
.button2{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}</code>
.parent{
background: red;
height:400px;
width: 100%;
display: grid;
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.child1 {
position: relative;
grid-row: span 3 / span 3;
background: blue;
width: fit-content;
}
.child2{
position: relative;
grid-row-start: 4;
background: green;
}
#grandchild1 {
height:90%;
width: 100px;
background: yellow;
}
#grandchild2 {
height: 90%;
width: 90%;
background: orange;
}
.button1{
position: absolute;
top: 64px;
right: 0;
transform: translateX(50%);
}
.button2{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
<code><div class="parent">
<div class="child1">
<button class="button1" onclick="hideShow('grandchild1')">Hide</button>
<div id="grandchild1"></div>
</div>
<div class="child2">
<button class="button2" onclick="hideShow('grandchild2')">Hide</button>
<div id="grandchild2"></div>
</div>
</div></code>
<code><div class="parent">
<div class="child1">
<button class="button1" onclick="hideShow('grandchild1')">Hide</button>
<div id="grandchild1"></div>
</div>
<div class="child2">
<button class="button2" onclick="hideShow('grandchild2')">Hide</button>
<div id="grandchild2"></div>
</div>
</div></code>
<div class="parent">
<div class="child1">
<button class="button1" onclick="hideShow('grandchild1')">Hide</button>
<div id="grandchild1"></div>
</div>
<div class="child2">
<button class="button2" onclick="hideShow('grandchild2')">Hide</button>
<div id="grandchild2"></div>
</div>
</div>