Template:Team:KIT-Kyoto/mobile

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(function(){
 +
    var ua = navigator.userAgent;
 +
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
 +
$(".accordion").addClass('m-active');
 +
}
 +
$(".m-active h2 a").click(function(){
 +
var num = $(".m-active h2 a").index(this);
 +
if($(".ac").eq(num).is(':hidden')){
 +
$(".ac").eq(num).slideDown();
 +
}else {
 +
$(".ac").eq(num).slideUp();
 +
}
 +
});
</script>
</script>
<style type="text/css">
<style type="text/css">
Line 81: Line 96:
z-index:10;
z-index:10;
}
}
-
.accordion label {
+
.accordion h2 a{
position: relative;
position: relative;
display: block;
display: block;
-
cursor: pointer;
+
cursor: pointer;
-
}
+
-
 
+
-
.accordion label::after {
+
-
position: absolute;
+
-
top: 50%;
+
-
right: 10px;
+
-
display: block;
+
-
content: '';
+
-
width: 8px;
+
-
height: 8px;
+
-
margin-top: -7px;
+
-
border-top: 1px solid #888;
+
-
border-right: 1px solid #888;
+
-
-webkit-transform: rotate(135deg);
+
-
transform: rotate(135deg);
+
}
}
div.ac {
div.ac {
-
position: relative;
+
display:none;
-
height: 0;
+
-
overflow: hidden;
+
-
-webkit-transition:all 0.2s ease;
+
-
        -moz-transition:all 0.2s ease;
+
-
        -o-transition:all 0.2s ease;
+
-
        transition:all 0.2s ease;
+
-
}
+
-
.accordion input:checked + label::after {
+
-
margin-top: -3px;
+
-
-webkit-transform: rotate(-45deg);
+
-
-moz-transform: rotate(-45deg);
+
-
        -o-transform: rotate(-45deg);
+
-
        -ms-transform: rotate(-45deg);
+
-
        transform: rotate(-45deg);
+
-
}
+
-
 
+
-
.accordion input:checked ~ div.ac {
+
-
height: auto;
+
}
}
}
}
</style>
</style>
</head>
</head>

Revision as of 19:51, 21 September 2014

Retrieved from "http://2014.igem.org/Template:Team:KIT-Kyoto/mobile"