Hoe - Uitbreiden van raster
Leer hoe u een uitbreidend raster maakt met CSS en JavaScript.
Uitbreidend raster
Klik op een vak om het te "uitvouwen" (100% breedte):
×
Vak 1
Laten we eens kijken naar de pijn zelf, het geleerde voor je laten terugdeinzen en begrijpen dat het je kalmeert. De juiste fout zou een verlaten advertentie betekenen
×
Vak 2
Laten we eens kijken naar de pijn zelf, het geleerde voor je laten terugdeinzen en begrijpen dat het je kalmeert. De juiste fout zou een verlaten advertentie betekenen
×
Vak 3
Laten we eens kijken naar de pijn zelf, het geleerde voor je laten terugdeinzen en begrijpen dat het je kalmeert. De juiste fout zou een verlaten advertentie betekenen
Een uitbreidend raster maken
Stap 1) HTML toevoegen:
Voorbeeld
<!-- 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>
Stap 2) CSS toevoegen:
Maak drie kolommen:
Voorbeeld
/* 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;
}
Stap 3) JavaScript toevoegen:
Voorbeeld
// 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";
}