|
|
| Line 3: |
Line 3: |
| | <html> | | <html> |
| | <head> | | <head> |
| − | <script>
| |
| | | | |
| | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
| | + | <script> |
| | $(document).ready(function(){ | | $(document).ready(function(){ |
| − | // When user clicks on tab, this code will be executed
| + | $(".flip").click(function(){ |
| − | $("#mtabs li").click(function() { | + | $(".panel").slideToggle("slow"); |
| − | // First remove class "active" from currently active tab
| + | |
| − | $("#mtabs li").removeClass('active'); | + | |
| − |
| + | |
| − | // Now add class "active" to the selected/clicked tab
| + | |
| − | $(this).addClass("active");
| + | |
| − |
| + | |
| − | // Hide all tab content
| + | |
| − | $(".mtab_content").hide();
| + | |
| − |
| + | |
| − | // Here we get the href value of the selected tab
| + | |
| − | var selected_tab = $(this).find("a").attr("href");
| + | |
| − |
| + | |
| − | // Show the selected tab content
| + | |
| − | $(selected_tab).fadeIn();
| + | |
| − |
| + | |
| − | // At the end, we add return false so that the click on the link is not executed
| + | |
| − | return false;
| + | |
| | }); | | }); |
| − | $("#simulate").click(function(){
| |
| − | $('a[rel="tab2"]').trigger("click");
| |
| − | });
| |
| | }); | | }); |
| − |
| |
| | | | |
| | </script> | | </script> |
| | | | |
| | <style src = "" type = "text/css"> | | <style src = "" type = "text/css"> |
| − | | + | /* .bio { |
| − | /* toggle tabs courtesy of http://codepen.io/anon/pen/hEpGK */
| + | display: none; |
| − | /* links to the style sheets for bootstrap */ | + | |
| − | <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
| + | |
| − |
| + | |
| − | <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
| + | |
| − | | + | |
| − | | + | |
| − | /*Tried to make the content border-color:width the whole page... Not the stupid box*/
| + | |
| − | body {
| + | |
| − | border: 0px;
| + | |
| | } | | } |
| | + | </script> |
| | + | .bio:on-click { |
| | + | display: block; */ |
| | | | |
| − | /* makes the white boxes go away */
| |
| − | #content{
| |
| − | background: white;
| |
| − | border: 0px;
| |
| − | float: center;
| |
| − | width: 100%;
| |
| − | margin-left:auto;
| |
| − | margin-right:auto;
| |
| − | padding-top: 0px;
| |
| − | }
| |
| | | | |
| − |
| |
| − | #mtabs_wrapper {
| |
| − | width: 422px;
| |
| − |
| |
| − | }
| |
| − | #mtabs_container {
| |
| − | border-bottom: 1px solid #ccc;
| |
| − | }
| |
| − | #mtabs {
| |
| − | list-style: none;
| |
| − | padding: 5px 0 4px 0;
| |
| − | margin-left: 35%;
| |
| − | /* font: 0.75em arial; */
| |
| − | }
| |
| − | #mtabs li {
| |
| − | display: inline;
| |
| − | }
| |
| − | #mtabs li a {
| |
| − | border: 1px solid #ccc;
| |
| − | padding: 4px 6px;
| |
| − | text-decoration: none;
| |
| − | color:#000;
| |
| − | font-family: Artifika, serif;
| |
| − | background-color: #eeeeee;
| |
| − | font-size:14px;
| |
| − | /*border-bottom: 1px solid #ccc;
| |
| − | outline: none;*/
| |
| − | border-radius: 5px 5px 5px 5px;
| |
| − | -moz-border-radius: 5px 5px 5px 5px;
| |
| − | -webkit-border-top-left-radius: 5px;
| |
| − | -webkit-border-top-right-radius: 5px;
| |
| − | }
| |
| − | #mtabs li a:hover {
| |
| − | background-color: #dddddd;
| |
| − | padding: 4px 6px;
| |
| − | }
| |
| − | #mtabs li.active a {
| |
| − | border-bottom: 1px solid #ccc;
| |
| − | background-color: #fff;
| |
| − | padding: 4px 6px 5px 6px;
| |
| − | /*border-bottom: none;*/
| |
| − | }
| |
| − | #mtabs li.active a:hover {
| |
| − | background-color: #eeeeee;
| |
| − | padding: 4px 6px 5px 6px;
| |
| − | /*border-bottom: none;*/
| |
| − | }
| |
| − |
| |
| − | #mtabs li a.icon_accept {
| |
| − | background-image: url(accept.png);
| |
| − | background-position: 5px;
| |
| − | background-repeat: no-repeat;
| |
| − | padding-left: 24px;
| |
| − | }
| |
| − | #mtabs li a.icon_accept:hover {
| |
| − | padding-left: 24px;
| |
| − | }
| |
| − |
| |
| − | /* where the content is */
| |
| − | #mtabs_content_container {
| |
| − | border: 1px solid #ccc;
| |
| − | border-top: 1px solid #ccc;
| |
| − | padding: 10px;
| |
| − | width: 90%;
| |
| − | margin: auto;
| |
| − | }
| |
| − | .mtab_content {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* TAB CSS END */
| |
| | | | |
| | </style> | | </style> |
| Line 135: |
Line 28: |
| | | | |
| | <body> | | <body> |
| − | <div class="mtabs_wrapper">
| + | <div id = "content"> |
| − | <!-- Original tabs START -->
| + | <table style="width:100%"> |
| − |
| + | <tr> |
| − | | + | <td class = "flip">Niteesh</a></td> |
| − | <ul>
| + | <td class = "flip">Dominique</td> |
| − | <li><a href="#tab1" rel="tab1">May</a></li>
| + | <td class = "flip">Michelle</td> |
| − | <li><a href="#tab2" rel="tab2">June</a></li>
| + | </tr> |
| − | <li><a href="#tab3" rel="tab3">July</a></li>
| + | <tr> |
| − | <li><a href="#tab3" rel="tab3">August</a></li>
| + | <td class = "panel">bio1</td> |
| − | <li class="active"><a href="#tab4" rel="tab4">September</a></li>
| + | <td class = "panel">bio2</td> |
| − | </ul>
| + | <td class = "panel">bio3</td> |
| − | </div>
| + | </tr> |
| − |
| + | </table> |
| − | <div id="mtabs_content_container"> | + | |
| − | <div id="tab1" class="mtab_content">
| + | |
| − | <p><a id="simulate" href="#mtabs_wrapper#mtabs_content_container#tab2">Take me to Tab 2</a></p>
| + | |
| − | </div>
| + | |
| − | <div id="tab2" class="mtab_content">
| + | |
| − | <p>Some things & stuff</p>
| + | |
| − | </div>
| + | |
| − | <div id="tab3" class="mtab_content">
| + | |
| − | <p>Probably more transformations</p>
| + | |
| − | </div>
| + | |
| − | <div id="tab4" class="mtab_content" style="display: block;"> | + | |
| − | <p>much synthetic biology, such wow</p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | <!-- Original tabs END -->
| + | |
| | </div> | | </div> |
| − |
| |
| | </body> | | </body> |
| | </html> | | </html> |
