Line 1: | Line 1: | ||
{{:Team:UNOTT/Template/NavBarTest}} | {{:Team:UNOTT/Template/NavBarTest}} | ||
− | <html> | + | <!DOCTYPE html> |
+ | <html > | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
+ | <title>Expandable Boxes With CSS Transitions</title> | ||
+ | <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> | ||
+ | |||
− | |||
− | |||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | ||
+ | |||
<style> | <style> | ||
− | + | .container { | |
− | + | width: 80%; | |
− | + | margin: 30px auto; | |
+ | |||
} | } | ||
− | + | .expandable-boxes { | |
position: relative; | position: relative; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | ||
+ | .expandable-box { | ||
+ | width: 30%; | ||
+ | height: 130px; | ||
+ | float: left; | ||
+ | margin: 0 3% 20px 0; | ||
+ | border: 1px solid #999; | ||
+ | border-radius: 12px; | ||
+ | padding: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
+ | -webkit-transition: all .3s ease-in-out; | ||
+ | -moz-transition: all .3s ease-in-out; | ||
+ | -o-transition: all .3s ease-in-out; | ||
+ | -ms-transition: all .3s ease-in-out; | ||
+ | transition: all .3s ease-in-out; | ||
+ | background-color: #02263e; | ||
} | } | ||
− | + | .expandable-box.open { | |
− | + | border-color: #D74214; | |
− | + | border-width: thick; | |
− | + | width: 96%; | |
− | + | height: 500px; | |
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
margin: 0; | margin: 0; | ||
− | + | background-color: #02263e; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | background | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .expandable-box.out { |
− | + | width: 0; | |
− | + | height: 0; | |
− | + | overflow: hidden; | |
− | + | border: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
padding: 0; | padding: 0; | ||
− | + | margin: 0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
opacity: 0; | opacity: 0; | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | body { | |
− | + | background: #ffffff; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | h1{ | |
− | + | color: #02263e; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | h2{ | |
− | + | color: #ffffff; | |
− | + | ||
} | } | ||
− | + | p{ | |
− | + | color: #ffffff; | |
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | html { | |
− | + | height: 100%; | |
− | + | ||
− | + | ||
} | } | ||
− | + | body { | |
− | + | display: flex; | |
− | + | align-items: center; | |
− | + | justify-content: center; | |
− | + | height: 100%; | |
− | + | user-select: none; | |
− | + | background: #ffffff; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #whoa-cool-button { | |
− | + | font-family: 'Roboto'; | |
− | + | font-size: 18pt; | |
− | + | font-weight: bold; | |
− | + | color: white; | |
− | + | background: #009688; | |
− | + | padding: 15px 0px; | |
− | + | border-radius: 20px; | |
− | + | box-shadow: 0px 15px 0px 0px #00695C; | |
− | + | cursor: pointer; | |
− | + | transition: .2s; | |
− | + | margin-right: 0px; | |
− | + | width: 100px; | |
+ | height:100p; | ||
} | } | ||
− | + | #whoa-cool-button:active { | |
− | + | transform: translateY(14px); | |
− | + | box-shadow: 0px 1px 0px 0px #00695C; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | .clickbutton{ | |
− | + | position: relative; | |
− | + | font-family: 'Roboto'; | |
+ | font-size: 18pt; | ||
+ | font-weight: bold; | ||
+ | color: white; | ||
+ | top: 280px; | ||
+ | left:300px; | ||
+ | background-color: #B7D18F; | ||
+ | box-shadow: 0px 15px 0px 0px #00695C; | ||
+ | width: 100px; | ||
+ | text-align: center; | ||
} | } | ||
− | + | ||
− | + | .clickbutton1{ | |
− | + | position: relative; | |
− | + | font-family: 'Roboto'; | |
− | + | font-size: 18pt; | |
− | + | font-weight: bold; | |
− | + | color: white; | |
− | + | top: 230px; | |
− | + | left:800px; | |
− | + | background-color: #B7D18F; | |
− | + | box-shadow: 0px 15px 0px 0px #00695C; | |
− | + | width: 100px; | |
− | + | text-align: center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
+ | |||
+ | |||
</head> | </head> | ||
<body> | <body> | ||
+ | <div class="container"> | ||
+ | <h1>EXPERIMENTS</h1> | ||
+ | <div class="expandable-boxes"> | ||
+ | <div class="expandable-box"> | ||
+ | <h2>OBJECTIVE: </h2> | ||
+ | <div id="clear2" style="display: none;"> | ||
+ | <p> Text </p> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
− | |||
− | |||
+ | <div class="clickbutton"> | ||
+ | <a href="https://2017.igem.org/Team:UNOTT/Notebook"> | ||
+ | <p>LAB BOOK</p> | ||
+ | </a> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | + | <div class="clickbutton1"> | |
− | + | <a href="https://2017.igem.org/Team:UNOTT/Results"> | |
− | + | <p>RESULTS</p> | |
− | + | </a> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | </div> | |
+ | </div> | ||
− | < | + | <div class="expandable-box"> |
+ | <h2>OBJECTIVE:</h2> | ||
+ | <div id="clear3" style="display: none;"> | ||
+ | <p>This is the next box on the page.</p> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
− | |||
− | |||
− | + | <div class="clickbutton"> | |
+ | <a href="https://2017.igem.org/Team:UNOTT/Notebook"> | ||
+ | <p>LAB BOOK</p> | ||
+ | </a> | ||
+ | </div> | ||
− | |||
− | + | <div class="clickbutton1"> | |
+ | <a href="https://2017.igem.org/Team:UNOTT/Results"> | ||
+ | <p>RESULTS</p> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <div class="expandable-box"> | |
+ | <h2>OBJECTIVE:</h2> | ||
+ | <div id="clear4" style="display: none;"> | ||
+ | <p>Here is another box.</p> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
− | |||
− | + | <div class="clickbutton"> | |
+ | <a href="https://2017.igem.org/Team:UNOTT/Notebook"> | ||
+ | <p>LAB BOOK</p> | ||
+ | </a> | ||
+ | </div> | ||
− | |||
− | + | <div class="clickbutton1"> | |
+ | <a href="https://2017.igem.org/Team:UNOTT/Results"> | ||
+ | <p>RESULTS</p> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <div class="expandable-box"> | |
+ | <h2>OBJECTIVE:</h2> | ||
+ | <div id="clear5" style="display: none;"> | ||
+ | <p>Now we have a box on the next row.</p> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
− | |||
− | + | <div class="clickbutton"> | |
− | + | <a href="https://2017.igem.org/Team:UNOTT/Notebook"> | |
− | + | <p>LAB BOOK</p> | |
− | + | </a> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="clickbutton1"> | |
− | + | <a href="https://2017.igem.org/Team:UNOTT/Results"> | |
− | + | <p>RESULTS</p> | |
− | + | </a> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="expandable-box"> | |
− | + | <h2>OBJECTIVE:</h2> | |
− | + | <div id="clear6" style="display: none;"> | |
− | + | <p>This is a box again.</p> | |
− | + | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | + | <div class="clickbutton"> | |
+ | <a href="https://2017.igem.org/Team:UNOTT/Notebook"> | ||
+ | <p>LAB BOOK</p> | ||
+ | </a> | ||
+ | </div> | ||
− | |||
− | + | <div class="clickbutton1"> | |
− | </ | + | <a href="https://2017.igem.org/Team:UNOTT/Results"> |
+ | <p>RESULTS</p> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="expandable-box"> | ||
+ | <h2>OBJECTIVE: </h2> | ||
+ | <div id="clear7" style="display: none;"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
+ | |||
+ | |||
+ | <div class="clickbutton"> | ||
+ | <a href="https://2017.igem.org/Team:UNOTT/Notebook"> | ||
+ | <p>LAB BOOK</p> | ||
+ | </a> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | <div class="clickbutton1"> | ||
+ | <a href="https://2017.igem.org/Team:UNOTT/Results"> | ||
+ | <p>RESULTS</p> | ||
+ | </a> | ||
</div> | </div> | ||
+ | <p>Would you believe that this is a box?</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> | ||
+ | |||
+ | |||
+ | <script>$(document).ready(function() { | ||
+ | //HOW TO HIDE | ||
+ | var mydiv = document.getElementById('clear2'); | ||
+ | var mydiv1 = document.getElementById('clear3'); | ||
+ | var mydiv2 = document.getElementById('clear4'); | ||
+ | var mydiv3 = document.getElementById('clear5'); | ||
+ | var mydiv4 = document.getElementById('clear6'); | ||
+ | var mydiv5 = document.getElementById('clear7'); | ||
+ | //HOW TO HIDE | ||
+ | |||
+ | $('.expandable-box').click(function(e) { | ||
+ | if($(this).hasClass('open')) { | ||
+ | //HOW TO HIDE | ||
+ | |||
+ | //HOW TO HIDE | ||
+ | $('.expandable-box.out').not($(this)).removeClass('out'); | ||
+ | $(this).removeClass('open'); | ||
+ | mydiv.style.display = 'none'; | ||
+ | mydiv1.style.display = 'none'; | ||
+ | mydiv2.style.display = 'none'; | ||
+ | mydiv3.style.display = 'none'; | ||
+ | mydiv4.style.display = 'none'; | ||
+ | mydiv5.style.display = 'none'; | ||
+ | } | ||
+ | else { | ||
+ | $('.expandable-box').not($(this)).addClass('out'); | ||
+ | $(this).addClass('open'); | ||
+ | |||
+ | //HOW TO HIDE | ||
+ | mydiv.style.display = 'block' | ||
+ | mydiv1.style.display = 'block' | ||
+ | mydiv2.style.display = 'block' | ||
+ | mydiv3.style.display = 'block' | ||
+ | mydiv4.style.display = 'block' | ||
+ | mydiv5.style.display = 'block' | ||
+ | //HOW TO HIDE | ||
+ | } | ||
+ | }); | ||
+ | });</script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
</body> | </body> | ||
</html> | </html> |
Revision as of 13:58, 7 September 2017
EXPERIMENTS