WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

アコーディオンパネル

f:id:mmmmofu:20160816145729p:plain

http://efu.sakura.ne.jp/web/accordion/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネル</title>
<style>
  /* reset */
  html,body,div,dl,dd,dt,p {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  }
  a {
    text-decoration: none;
  }
  ul {
    list-style: none;
  }
  img {
    border: none; 
    vertical-align: bottom;
  }
  dl {
    width: 400px;
    margin: 50px auto;
  }
  dt {
    background: #7CADB6;
    border-bottom: 1px solid #FFF;
    cursor: pointer;
    color: #FFF;
    padding: 1em;
    text-align: center;
  }
  dd {
    border: 1px solid #7CADB6;
    border-top: none;
    height: 200px;
  }
  dd p {
    line-height: 1.5;
  }
</style>
<script src="js/jquery-1.11.3.min.js"></script>

</head>
<body>
<div id="container">
  <dl>
    <dt>テキスト1</dt>
    <dd>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス   トテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ  キストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </dd>
    <dt>テキスト2</dt>
    <dd>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </dd>
    <dt>テキスト3</dt>
    <dd>
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </dd>
  </dl>
</div>
<script>
  $(function(){
    $('dd:not(:first)').css('display','none');
    $('dt').click(function(){
      if($('+dd',this).css('display')=='none'){
        $('dd').slideUp(800);
        $('+dd',this).slideDown(800);
      }
    });
  });
</script>
</body>
</html>