Difference between revisions of "M365/test1"
< M365
Jump to navigation
Jump to search
| Line 7: | Line 7: | ||
} | } | ||
| − | /* | + | body { |
| + | margin: 0; | ||
| + | font-family: Arial, Helvetica, sans-serif; | ||
| + | } | ||
| + | |||
| + | /* The grid: Three equal columns that floats next to each other */ | ||
.column { | .column { | ||
float: left; | float: left; | ||
| − | padding: | + | width: 33.33%; |
| − | + | padding: 50px; | |
| − | + | text-align: center; | |
| − | + | font-size: 25px; | |
| − | + | cursor: pointer; | |
| − | + | color: white; | |
} | } | ||
| − | . | + | .containerTab { |
| − | + | padding: 20px; | |
| + | color: white; | ||
} | } | ||
| Line 27: | Line 33: | ||
display: table; | display: table; | ||
clear: both; | clear: both; | ||
| + | } | ||
| + | |||
| + | /* Closable button inside the container tab */ | ||
| + | .closebtn { | ||
| + | float: right; | ||
| + | color: white; | ||
| + | font-size: 35px; | ||
| + | cursor: pointer; | ||
} | } | ||
</style> | </style> | ||
}} | }} | ||
| − | <h2> | + | <div style="text-align:center"> |
| + | <h2>Expanding Grid</h2> | ||
| + | <p>Click on the boxes below:</p> | ||
| + | </div> | ||
| + | <!-- Three columns --> | ||
<div class="row"> | <div class="row"> | ||
| − | <div class="column | + | <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> | ||
| − | <div class="column | + | <div class="column" onclick="openTab('b3');" style="background:red;"> |
| − | + | Box 3 | |
| − | |||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <!-- Full-width columns: (hidden by default) --> | ||
| + | <div id="b1" class="containerTab" style="display:none;background:green"> | ||
| + | <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> | ||
| + | <h2>Box 1</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p> | ||
| + | </div> | ||
| + | |||
| + | <div id="b2" class="containerTab" style="display:none;background:blue"> | ||
| + | <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> | ||
| + | <h2>Box 2</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p> | ||
| + | </div> | ||
| + | |||
| + | <div id="b3" class="containerTab" style="display:none;background:red"> | ||
| + | <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> | ||
| + | <h2>Box 3</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | 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"; | ||
| + | } | ||
| + | </script> | ||
Revision as of 21:26, 4 March 2023
Expanding Grid
Click on the boxes below:
Box 1
Box 2
Box 3
<script> 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";
} </script>
