|
|
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <head> | | <head> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | < |
| − | <style>
| + | |
| − | * {
| + | |
| − | box-sizing: border-box;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | margin: 0;
| + | |
| − | font-family: Arial;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* The grid: Three equal columns that floats next to each other */
| + | |
| − | .column {
| + | |
| − | float: left;
| + | |
| − | width: 25%;
| + | |
| − | padding: 50px;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 25px;
| + | |
| − | cursor: pointer;
| + | |
| − | color: black;
| + | |
| − | }
| + | |
| − | | + | |
| − | .containerTab {
| + | |
| − | padding: 20px;
| + | |
| − | color: blue;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Clear floats after the columns */
| + | |
| − | .row:after {
| + | |
| − | content: "";
| + | |
| − | display: table;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Closable button inside the container tab */
| + | |
| − | .closebtn {
| + | |
| − | float: right;
| + | |
| − | color: black;
| + | |
| − | font-size: 35px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | | + | |
| − | <div style="text-align:center">
| + | |
| − | <h2>Expanding Grid</h2>
| + | |
| − | <p>Click on the boxes below:</p>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Three columns -->
| + | |
| − | <div class="row">
| + | |
| − | <div class="column" onclick="openTab('b1');" style="background:green;">
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2018/e/e4/T--USP-EEL-Brazil--Taiseteste.jpg" alt="Taise" title="Seriously, how let the dogs out?!" />
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="column" onclick="openTab('b2');" style="background:blue;">
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2018/2/20/T--USP-EEL-Brazil--Cibele.jpg" alt="Cibele" title="After my plastic surgery!" />
| + | |
| − | | + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="column" onclick="openTab('b3');" style="background:red;">
| + | |
| − | Box 3
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="column" onclick="openTab('b4');" >
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2018/e/e4/T--USP-EEL-Brazil--Taiseteste.jpg" alt="Taise" title="Seriously, how let the dogs out?!" />
| + | |
| − | | + | |
| − | </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>
| + | |
| − | | + | |
| − | <div id="b4" class="containerTab" >
| + | |
| − | <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
| + | |
| − | <h2>Box 4</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>
| + | |
| − | | + | |
| | </body> | | </body> |
| | </html> | | </html> |
