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">
 
-
var checkwidth = function() {
 
-
var browserwidth = $(window).width();
 
-
if(browserwidth <= 568){
 
-
$('.main-contents').addClass('kit_article');
 
-
};
 
-
};
 
-
$(function(){
 
-
    checkwidth();
 
-
    $(window).resize(checkwidth);
 
-
});
 
-
 
-
(function($){
 
-
$(function(){
 
-
var accordionItem=$('.kit_article');
 
-
accordionItem.find('.sentence').hide();
 
-
var no=0;
 
-
accordionItem.find('h2').eq(no).addClass('active').next('.sentence').show();
 
-
 
-
//click-action
 
-
accordionItem.find('h2').click(function () {
 
-
 
-
//slide
 
-
$(this).next('.sentence').slideToggle('slow')
 
-
.siblings('.sentence:visible').slideUp('slow');
 
-
//activeクラス切り替え
 
-
$(this).toggleClass('active');
 
-
$(this).siblings('h2').removeClass('active');
 
-
 
-
});
 
-
});
 
-
});
 
-
 
-
</script>
 
<style type="text/css">
<style type="text/css">
@media screen and (max-width: 568px) {
@media screen and (max-width: 568px) {

Revision as of 17:28, 21 September 2014

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