JQ|アコーディオンメニュー

課題 jQuery

html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>accordion</title>
<link rel="stylesheet" href="css/temp_rest.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
article, aside, dialog, fiqure, footer, header, hgroup, menu, nav, section {
		display:block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/accodion.js"></script>
</head>

<body>
<div id="container">
  <header>
    <h1><img src="img/ci.gif" alt="KitchenWareClub" width="357" height="35" ></h1>
    <div id="mail"> <img src="img/ic01.gif" alt="お問い合わせ"><a href="#">お問い合わせ</a></div>
  </header>
  <!-- /header -->
  
  <div class="tabloid">
    <h2><img src="img/vis01.jpg" alt="imgPhoto" width="552" height="230"> </h2>
    <nav class="gNavi">
      <p id="top"><span>top</span></p>
      <ul>
        <li><a href="#">リンク項目その１</a></li>
        <li><a href="#">リンク項目その２</a></li>
      </ul>
      <p id="kitchenware"><span>Kitchenware Club</span></p>
      <ul>
        <li><a href="#">リンク項目その１</a></li>
        <li><a href="#">リンク項目その２</a></li>
      </ul>
      <p id="product"><span>製品情報</span></p>
      <ul>
        <li><a href="#">リンク項目その１</a></li>
        <li><a href="#">リンク項目その２</a></li>
      </ul>
      <p id="company"><span>会社概要</span></p>
      <ul>
        <li><a href="#">リンク項目その１</a></li>
        <li><a href="#">リンク項目その２</a></li>
      </ul>
      <p id="shop"><span>取り扱いショップ一覧</span></p>
      <ul>
        <li><a href="#">リンク項目その１</a></li>
        <li><a href="#">リンク項目その２</a></li>
      </ul>
    </nav>
  </div>
  <!-- / .tabloid -->
  <hr>
  <div id="wrapper">
    <div id="content">
      <section>
        <h2 id="newProduct"><span>新着製品</span></h2>
        
        <section class="item">
        <img src="img/vis02.jpg" alt="キッチンクラブ" id="jpg">
          <h3>キッチンクラブ･オリジナル<img src="img/ic03.gif" alt="japan" align="right"></h3>
          <p class="itemCopy">厚手ガラスタンブラー・小 約280ml</p>
          <aside>
            <p>梨地の丈夫な厚手ガラスです。割れにくいガラスを使用しています。これからの季節にピッタリのタンブラーです。</p>
          </aside>
        </section>
        <!-- / item01-->
        
        <section class="item">
        <img src="img/vis03.jpg" alt="木製 スプーン" id="jpg">
        <h3>山崎木工<img src="img/ic03.gif" alt="japan" align="right"></h3>
        <p class="itemCopy">木製 スプーン 39×155mml</p>
        <aside>
          <p>柔らかな形状の木製スプーンです。
            何通りもの試作品を作り、その中から
            最も手になじむ物を製品化しました。</p>
        </aside>
      </section>
      <!-- / item02-->
      
      <section class="item">
      <img src="img/vis04.jpg" alt="ステンレスマルチトング" id="jpg">
      <h3>WAECHTERSBACH<img src="img/ic04.gif" alt="itria" align="right"></h3>
      <p class="itemCopy">ステンレスマルチトング 長さ23cm</p>
      <aside>
        <p>ドイツの老舗食器メーカー・べヒタフバッハから
          シンプルなステンレストングの入荷です。
          軽くてつかみやすい設計になっています。</p>
      </aside>
      </section>
      <!-- / item3-->
      <aside class="past">
        <p><img src="img/ic02.gif" alt="pastInfo" id="yazirusi"><a href="#">以前の新着情報を見る</a></p>
      </aside>
    </div>
    <!-- /#content -->
    
    <div id="record">
      <section>
        <h2 id="update"><span>更新情報</span></h2>
        <dl>
          <dt><img src="img/ic02.gif" id="yazirusi">2013.7.2</dt>
          <dd><a href="#">夏の新作商品を5点追加しました。</a></dd>
          <dt><img src="img/ic02.gif" id="yazirusi">2013.6.22</dt>
          <dd><a href="#">日本中の食器が集まるイベント"日本食器展示会"にキッチンクラブも出品しました。</a></dd>
          <dt><img src="img/ic02.gif" id="yazirusi">2013.6.12</dt>
          <dd><a href="#">取扱ショップ情報を更新しました。</a></dd>
        </dl>
      </section>
    </div>
    <!-- /#record -->
    <nav class="fNav">
      <ul>
        <li>サイトマップ</li>
        <li>｜</li>
        <li>プライバシーポリシー</li>
        <li>｜</li>
        <li>アクセシビリティポリシー</li>
      </ul>
    </nav>
  </div>
  <!-- / #wrapper -->
  
  <footer>
    <p>Copyright &#169; 2013 キッチンクラブ All Rights Reserved.</p>
  </footer>
  <!-- /footer --> 
  
</div>
<!-- /#containerr -->
</body>
</html>

css

@charset "utf-8";
/* CSS Document */

body,header,div,footer,article,aside,section,ul,li,nav,a,h1,h2,h3,h4,p{
  margin:0;
  padding:0;
}

body{
  background:#FFFFFF;
  
/*font*/	
  font-size:16px;
  line-height:1;
  font-family:"Hiragino Kaku Gothic ProN",
				Meiryo,
				sans-serf;
}

ul{
	list-style:none;
		}

a {
  text-decoration: none;
}

jQuery

$(function(){
$(".gNavi ul:not(:first)").css("display","none");
//&#9312;dd要素の兄弟要素で一番目要素以外のものを全て非表示
$("nav p").click(function(){
 //&#9313;dtをクリックした時のイベントアクション
  if($("+ul",this).css("display")=="none"){
//&#9314;もしクリックしたdtの次にあるddが非表示の場合...
      $(this).siblings("ul").slideUp("slow");
//&#9314;if-１ddを非表示
      $("+ul",this).slideDown("slow");
      }
//&#9314;if-2 ddが表示

  });
});

完成ページ

http://kaeru.syogyoumujou.com/kadai/%5BJQ%5Daccordion/accordion.html