WEB、始めました

半年間WEB制作の学校に通います。その記録。

40日目　アコーディオンパネル

■アコーディオンパネル
http://tototo.webcrow.jp/BlogUp/1/accordion.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンパネル</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
  $('dd:not(:first)').css('display','none');  //1つ目以外のddは閉じる（1つ目は開いている）
  $('dl dt').on('click',function(){
    if($('+dd',this).css('display')=='none'){  //this=押されたdt に隣接しているddが閉じていたら
      $('dd').slideUp('slow');  //開かれてるddを閉じる(全てのddを閉じる)
      $('+dd',this).slideDown('slow');  //押したdtの隣接している閉じられているddを開く
	}
  });
  });
  </script>
</head>

<body>
<div id="container">
<dl>
<dt>好きな食べ物</dt>
<dd>うどんうどんうどんうどんうどんうどんうどんうどんうどんうどん</dd>
<dt>好きな飲み物</dt>
<dd>ビールビールビールビールビールビールビールビールビールビール</dd>
<dt>好きな事</dt>
<dd>旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行</dd>
</dl>
</div>
</body>
</html>

■アコーディオンパネル２
授業ではやってないけど開いたタブを色が変わるように変更してみた
http://tototo.webcrow.jp/BlogUp/2/accordion2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アコーディオンパネル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(function(){
  $('dd:not(:first)').css('display','none');  //1つ目以外のddは閉じる（1つ目は開いている）
  $('dl dt').on('click',function(){
    if($('+dd',this).css('display')=='none'){  //this=押されたdt に隣接しているddが閉じていたら
      $('dd').slideUp('slow');  //開かれてるddを閉じる(全てのddを閉じる)
      $('+dd',this).slideDown('slow');  //押したdtの隣接している閉じられているddを開く
      $('dt').css('color','#000').css('background','#7CADB6');
      $(this).css('color','#7CADB6').css('background','#000');
    }
  });
});
//順番も大事（下が上書きしてる） $('dd').slideUp('slow');を下にすると全てが閉じられてしまう。
</script>
</head>

<body>
<h1>開いたらdtの色が変わるようにする</h1>
<div id="container">
<dl>
<dt>好きな食べ物</dt>
<dd>うどんうどんうどんうどんうどんうどんうどんうどんうどんうどん</dd>
<dt>好きな飲み物</dt>
<dd>ビールビールビールビールビールビールビールビールビールビール</dd>
<dt>好きな事</dt>
<dd>旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行旅行</dd>
</dl>
</div>
</body>
</html>

■animate　復習
http://tototo.webcrow.jp/BlogUp/3/hukushu2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-animate()-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
p {
  width:2184px;
  height:410px;
  margin:0;
}
div {
  width:546px;
  height:410px;
  overflow:hidden;
}
</style>
<script>
$(function(){
  $( '#surf1' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-546px' },'slow', 'swing' );
  });
  $( '#surf2' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-1092'}, 'slow', 'swing');
  });
  $( '#surf3' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-1638'}, 'slow', 'swing');
  });
  $( '#surf4' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '0'}, 'slow', 'swing');
  });
});
</script>
</head>
<body>
<div>
<p><img src="../0317/img/surf01.png" alt="サーフィン１" id="surf1"><img src="../0317/img/surf02.png" alt="サーフィン２" id="surf2"><img src="../0317/img/surf03.png" alt="サーフィン3" id="surf3"><img src="../0317/img/surf04.png" alt="サーフィン4" id="surf4"></p>
</div>
</body>
</html>