Team:NCTU Formosa/source/header/Test

From 2014.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
-
 
-
#tabs {
 
-
  overflow: auto;
 
-
  width: 100%;
 
-
  list-style: none;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
}
 
-
 
-
#tabs li {
 
-
    margin: 0;
 
-
    padding: 0;
 
-
    float: left;
 
-
}
 
-
 
-
#tabs a {
 
-
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
 
-
    background: #ad1c1c;
 
-
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
 
-
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
 
-
    color: #fff;
 
-
    float: left;
 
-
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
 
-
    height: 35px;
 
-
    padding: 0 30px;
 
-
    text-decoration: none;
 
-
}
 
-
 
-
#tabs a:hover {
 
-
    background: #c93434;
 
-
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);   
 
-
}
 
-
 
-
#tabs a:focus {
 
-
    outline: 0;
 
-
}
 
-
 
-
#tabs #current a {
 
-
    background: #fff;
 
-
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
 
-
    text-shadow: none;   
 
-
    color: #333;
 
-
}
 
-
 
-
#content {
 
-
    background-color: #fff;
 
-
    background-image:        linear-gradient(top, #fff, #ddd);
 
-
    border-radius: 0 2px 2px 2px;
 
-
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
 
-
    padding: 30px;
 
-
}
 
-
 
-
/* Remove the rule below if you want the content to be "organic" */
 
-
#content div {
 
-
    height: 220px;
 
-
}
 
Line 175: Line 119:
}
}
</style>
</style>
-
<script>$(document).ready(function() {
+
<script>
-
    $("#content div").hide(); // Initially hide all content
+
$(document).ready(function(){
-
     $("#tabs li:first").attr("id","current"); // Activate first tab
+
$(".move1").hide();
-
     $("#content div:first").fadeIn(); // Show first tab content
+
$(".move2").hide();
-
      
+
$(".move3").hide();
-
     $('#tabs a').click(function(e) {
+
$(".move4").hide();
-
        e.preventDefault();      
+
$(".move5").hide();
-
        $("#content div").hide(); //Hide all content
+
$(".move6").hide();
-
        $("#tabs li").attr("id",""); //Reset id's
+
$(".move7").hide();
-
        $(this).parent().attr("id","current"); // Activate this
+
$(".move8").hide();
-
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
+
$(".move9").hide();$(".move10").hide();
-
    });
+
 
-
})();</script>
+
  $("#seemore1").click(function(){
 +
     $(".move1").slideToggle();
 +
  });
 +
$("#seemore2").click(function(){
 +
    $(".move2").slideToggle();
 +
  });
 +
$("#seemore3").click(function(){
 +
    $(".move3").slideToggle();
 +
  });
 +
$("#seemore4").click(function(){
 +
     $(".move4").slideToggle();
 +
  });
 +
$("#seemore5").click(function(){
 +
    $(".move5").slideToggle();
 +
  });
 +
$("#seemore6").click(function(){
 +
     $(".move6").slideToggle();
 +
  });
 +
$("#seemore7").click(function(){
 +
     $(".move7").slideToggle();
 +
  });
 +
$("#seemore8").click(function(){
 +
    $(".move8").slideToggle();
 +
  });
 +
$("#seemore9").click(function(){
 +
    $(".move9").slideToggle();
 +
  });
 +
$("#seemore10").click(function(){
 +
    $(".move10").slideToggle();
 +
  });
 +
});
 +
</script>
 +
 
 +
 
 +
 
 +
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 +
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
 +
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 +
<link rel="stylesheet" href="/resources/demos/style.css">
 +
<script>
 +
$(function() {
 +
$( "#dialog" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
});
 +
$( "#opener" ).click(function() {
 +
$( "#dialog" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 +
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
 +
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 +
<link rel="stylesheet" href="/resources/demos/style.css">
 +
<script>
 +
$(function() {
 +
$( "#dialog" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
});
 +
$( "#opener" ).click(function() {
 +
$( "#dialog" ).dialog( "open" );
 +
});
 +
});
 +
</script>

Latest revision as of 15:05, 17 October 2014