Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!

Difference between revisions of "M365/test1"

From wiki
Jump to navigation Jump to search
Line 7: Line 7:
 
}
 
}
  
−
/* Create two unequal columns that floats next to each other */
+
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: 10px;
+
  width: 33.33%;
−
   height: 300px; /* Should be removed. Only for demonstration */
+
   padding: 50px;
−
}
+
   text-align: center;
−
 
+
  font-size: 25px;
−
.left {
+
  cursor: pointer;
−
   width: 25%;
+
   color: white;
 
}
 
}
  
−
.right {
+
.containerTab {
−
   width: 75%;
+
   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>Two Unequal Columns</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 left" style="background-color:#aaa;">
+
   <div class="column" onclick="openTab('b1');" style="background:green;">
−
     <h2>Column 1</h2>
+
     Box 1
−
    <p>Some text..</p>
+
  </div>
 +
  <div class="column" onclick="openTab('b2');" style="background:blue;">
 +
    Box 2
 
   </div>
 
   </div>
−
   <div class="column right" style="background-color:#bbb;">
+
   <div class="column" onclick="openTab('b3');" style="background:red;">
−
     <h2>Column 2</h2>
+
     Box 3
−
    <p>Some text..</p>
 
 
   </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">&times;</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">&times;</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">&times;</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 22: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>

Retrieved from "https://wiki.gccollab.ca/index.php?title=M365/test1&oldid=92661"