|
|
| Line 7: |
Line 7: |
| | } | | } |
| | | | |
| − | body {
| + | /* Create two equal columns that floats next to each other */ |
| − | 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; |
| − | width: 33.33%; | + | width: 50%; |
| − | padding: 50px; | + | padding: 10px; |
| − | text-align: center; | + | height: 300px; /* Should be removed. Only for demonstration */ |
| − | font-size: 25px;
| |
| − | cursor: pointer;
| |
| − | color: white;
| |
| − | }
| |
| − | | |
| − | .containerTab { | |
| − | padding: 20px;
| |
| − | color: white;
| |
| | } | | } |
| | | | |
| Line 33: |
Line 20: |
| | 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> |
| | }} | | }} |
| | | | |
| − | <div style="text-align:center">
| + | <h2>Two Equal Columns</h2> |
| − | <h2>Expanding Grid</h2>
| |
| − | <p>Click on the boxes below:</p>
| |
| − | </div>
| |
| | | | |
| − | <!-- Three columns -->
| |
| | <div class="row"> | | <div class="row"> |
| − | <div class="column" onclick="openTab('b1');" style="background:green;"> | + | <div class="column" style="background-color:#aaa;"> |
| − | Box 1 | + | <h2>Column 1</h2> |
| − | </div>
| + | <p>Some text..</p> |
| − | <div class="column" onclick="openTab('b2');" style="background:blue;">
| |
| − | Box 2
| |
| | </div> | | </div> |
| − | <div class="column" onclick="openTab('b3');" style="background:red;"> | + | <div class="column" style="background-color:#bbb;"> |
| − | Box 3 | + | <h2>Column 2</h2> |
| | + | <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">×</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>
| |
