Cara - Memperluas Grid
Pelajari cara membuat kisi yang diperluas dengan CSS dan JavaScript.
Memperluas Grid
Klik pada kotak untuk "memperluas" (lebar 100%):
×
Kotak 1
Mari kita periksa rasa sakit itu sendiri, biarkan yang terpelajar menyusut dari Anda, dan pahami bahwa itu menenangkan Anda. Kesalahan yang benar berarti iklan yang ditinggalkan
×
Kotak 2
Mari kita periksa rasa sakit itu sendiri, biarkan yang terpelajar menyusut dari Anda, dan pahami bahwa itu menenangkan Anda. Kesalahan yang benar berarti iklan yang ditinggalkan
×
Kotak 3
Mari kita periksa rasa sakit itu sendiri, biarkan yang terpelajar menyusut dari Anda, dan pahami bahwa itu menenangkan Anda. Kesalahan yang benar berarti iklan yang ditinggalkan
Buat Grid yang Memperluas
Langkah 1) Tambahkan HTML:
Contoh
<!-- The grid: three columns -->
<div class="row">
<div class="column" onclick="openTab('b1');" style="background:green;">Box
1</div>
<div class="column" onclick="openTab('b2');" style="background:blue;">Box
2</div>
<div class="column" onclick="openTab('b3');" style="background:red;">Box
3</div>
</div>
<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display:none;background:green">
<!-- If you want the ability to close the container, add a close button -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 1</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b2" class="containerTab" style="display:none;background:blue">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 2</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b3" class="containerTab" style="display:none;background:red">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 3</h2>
<p>Lorem ipsum..</p>
</div>
Langkah 2) Tambahkan CSS:
Buat tiga kolom:
Contoh
/* The grid: Three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 50px;
text-align: center;
font-size: 25px;
cursor: pointer;
color: white;
}
.containerTab
{
padding: 20px;
color: white;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Closable button inside the image */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
Langkah 3) Tambahkan JavaScript:
Contoh
// Hide all elements with class="containerTab",
except for the one that matches the clickable grid column
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}