jQuery accordion-panel

jQuery-test

製品情報

無線ＬＡＮ・有線ＬＡＮ

無線ＬＡＮ: 内容

内容

内容

内容

内容
有線ＬＡＮ: 内容

内容

内容

内容

内容

ハードディスク

外付けＨＤＤ: 内容

内容

内容

内容

内容
ポータブルＨＤＤ: 内容

内容

内容

内容

内容

テーマヘッダー (header.php)
(追加は最下位)

<script type="text/javascript">
jQuery(function($){
$(function(){
 
  var ap = $('#accordion-panel');
   
  ap.find('dt').on('click', function(){
    var flag = $(this).next('dd').is(":hidden");
 
    $(this).siblings('dd').slideUp();             /* 同階層の dd 要素を非表示 */
    $(this).siblings('dd').find('dd').slideUp();  /* 同階層の dd 要素以下の dd 要素を非表示*/
 
    if (flag) {
      $(this).next('dd').slideDown();
    } else {
      $(this).next('dd').slideUp();
    }
  });
 
});
</script>

テーマヘッダー (header.php)

<head>
	<script type="text/javascript">
jQuery(function($){
var ap = $('#accordion-panel');
   
  ap.find('dt').on('click', function(){
    var flag = $(this).next('dd').is(":hidden");
 
    $(this).siblings('dd').slideUp();             /* 同階層の dd 要素を非表示 */
    $(this).siblings('dd').find('dd').slideUp();  /* 同階層の dd 要素以下の dd 要素を非表示*/
 
    if (flag) {
      $(this).next('dd').slideDown();
    } else {
      $(this).next('dd').slideUp();
    }
  });
});
</script>
	
</head>

/*----------------------*/
/*--アコーディオンパネル---CSS-----------------*/
/*----------------------*/
#accordion-panel dt {
  cursor: pointer;
  margin-bottom: 1px;
}
 
#accordion-panel dd .inner {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  margin: 3px 0;
}
 
#accordion-panel dd {
  display: none;
}
 
.layer-1 dt {
  background-color: #9aabf3;
  padding: 5px 0;
  font-size: 1.25em;
  text-align: center;
  color: #0d2170;
}
 
.layer-2 dt {
  background-color: #b8c4f7;
  padding: 5px 0;
  font-size: 1.0em;
  text-align: center;
  color: #0d2170;
}
 
.layer-3 dt {
  background-color: #d7defa;
  margin-bottom: 1px;
  padding: 5px 0;
  font-size: 0.8em;
  text-align: center;
  color: #0d2170;
}

MENU