JavaScript + Ajax 実践サンプル集 - パネルを展開／折りたたむ

パネルを展開／折りたたむ

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのtoggle()イベントを利用してパネルを展開／折りたたみます。パネルの見だしをクリックするとコンテンツを展開します。コンテンツが展開されている状態で見だしをクリックするとコンテンツを折りたたみます。

パネルを展開／折りたたむにはdiv.collapsiPanelHeader要素にtoggleイベントを登録します。このイベントの引数1には、Mouseoverのイベント処理を記述します。引数2には、Mouseoutのイベント処理を記述します。Mouseoverのイベント処理では、show()メソッドを実行してパネルのコンテンツを展開します。Mouseoutのイベント処理では、hide()メソッドを実行してコンテンツを折りたたみます。

$(function() {
  $('div.collapsePanelHeader').toggle(
    function() {
      $(this).next('div.content').show('slow');
      $(this).children('div:last').removeClass('expand').addClass('close');
    },
    function() {
      $(this).next('div.content').hide('slow');
      $(this).children('div:last').removeClass('close').addClass('expand');
    });
});

このサンプルで使用しているイメージとCSSです。

.collapsePanelHeader
{
  background-image: url(Images/bg-menu-main.png);
}
.arrow.expand
{
  background-image: url(Images/expand_blue.jpg);
}
.arrow.close
{
  background-image: url(Images/collapse_blue.jpg);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="DhtmlAdvanced/collapsiblePanel/base.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
  $('div.collapsePanelHeader').toggle(
    function() {
      $(this).next('div.content').show('slow');
      $(this).children('div:last').removeClass('expand').addClass('close');
    },
    function() {
      $(this).next('div.content').hide('slow');
      $(this).children('div:last').removeClass('close').addClass('expand');
    });
});            
</script>    
</head>
<body>

<div id="demo">
  
    <div class="containerPanel">
      <div class="collapsePanelHeader">
        <div class="headerContent">
          jQuery Collapsible Panel #1
        </div>
        <div class="arrow expand"></div>        
      </div>
      <div class="content" style="display: none">
        Lorem ipsum eam veri regione appellantur in, 
        deseruisse voluptatibus interpretaris cum ea. 
        Hinc ignota no usu. Qui ut iriure imperdiet disputando, 
        iisque impetus equidem ne eum. 
        Et sit cetero explicari expetendis, mea quod takimata intellegat et, 
        porro legere maiorum at his. Mea ei paulo consulatu eloquentiam, 
        regione inimicus principes te sea, accusamus laboramus in vel. 
        No mel errem detraxit consequuntur, no usu dicant regione accusata. 
        Harum intellegam ullamcorper vis te, solum verear consequuntur in his.      
      </div>
    </div>
    
    <div class="containerPanel">
      <div class="collapsePanelHeader">
        <div class="headerContent">
          jQuery Collapsible Panel #2
        </div>
        <div class="arrow expand"></div>        
      </div>
      <div class="content" style="display: none">
        Probo prodesset ei eum. Usu ea fastidii adolescens abhorreant, 
        eam harum timeam id, at his nihil eirmod. Usu ei accusam antiopam recteque, 
        ut quodsi dignissim vim. Vis lorem soleat gubergren cu, 
        mei at quidam intellegat scribentur, et est debet persecuti necessitatibus. 
        Pri ut harum regione gloriatur, detracto inimicus consulatu vel ut.
        Quo eu essent prompta consectetuer, petentium rationibus constituam sed id.    
      </div>
    </div>    
    
    <div class="containerPanel">
      <div class="collapsePanelHeader">
        <div class="headerContent">
          jQuery Collapsible Panel #3
        </div>
        <div class="arrow expand"></div>        
      </div>
      <div class="content" style="display: none">
        Te his summo omnes invenire, id quo nisl minimum recteque, sale debet vim et. 
        Impedit adversarium nam ne, mea ea maiorum persecuti instructior. 
        Omnes repudiandae cu sed, vocent referrentur ei vis, est eu vero regione oporteat. 
        Feugait quaestio reprehendunt sed eu, adhuc sententiae no nec, 
        an nullam incorrupte eloquentiam mel. Ad debet discere insolens mea,
        nam et mediocrem splendide comprehensam. Sea ea numquam legendos eleifend, 
        pro ut munere audire aperiam, ius ex augue quodsi omnesque.   
      </div>
    </div>     
    
  </div>

</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
div#demo 
{
 margin:10px;
}

.containerPanel
{
  width: 400px;
  border: 1px;
  border-color: #1052a0;
  border-style: double double double double;
}
.collapsePanelHeader
{
  width: 400px;
  height: 30px;
  background-image: url(Images/bg-menu-main.png);
  background-repeat: repeat-x;
  color: #FFF;
  font-weight: bold;
}
.headerContent
{
  float: left;
  padding-left: 5px;
}
.content
{
}
.arrow.expand
{
  background-image: url(Images/expand_blue.jpg);
  width: 13px;
  height: 13px;
  float: right;
  margin-top: 7px;
  margin-right: 5px;
}
.arrow.expand:hover
{
  cursor: hand;
}
.arrow.close
{
  background-image: url(Images/collapse_blue.jpg);
  width: 13px;
  height: 13px;
  float: right;
  margin-top: 7px;
  margin-right: 5px;
}
.arrow.close:hover
{
  cursor: hand;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/collapsiblePanel/base.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
  $('div.collapsePanelHeader').toggle(
    function() {
      $(this).next('div.content').show('slow');
      $(this).children('div:last').removeClass('expand').addClass('close');
    },
    function() {
      $(this).next('div.content').hide('slow');
      $(this).children('div:last').removeClass('close').addClass('expand');
    });
});            
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="demo">

  <div class="containerPanel">
    <div class="collapsePanelHeader">
      <div class="headerContent">
        jQuery Collapsible Panel #1
      </div>
      <div class="arrow expand"></div>        
    </div>
    <div class="content" style="display: none">
      Lorem ipsum eam veri regione appellantur in, 
      deseruisse voluptatibus interpretaris cum ea. 
      Hinc ignota no usu. Qui ut iriure imperdiet disputando, 
      iisque impetus equidem ne eum. 
      Et sit cetero explicari expetendis, mea quod takimata intellegat et, 
      porro legere maiorum at his. Mea ei paulo consulatu eloquentiam, 
      regione inimicus principes te sea, accusamus laboramus in vel. 
      No mel errem detraxit consequuntur, no usu dicant regione accusata. 
      Harum intellegam ullamcorper vis te, solum verear consequuntur in his.      
    </div>
  </div>
  
  <div class="containerPanel">
    <div class="collapsePanelHeader">
      <div class="headerContent">
        jQuery Collapsible Panel #2
      </div>
      <div class="arrow expand"></div>        
    </div>
    <div class="content" style="display: none">
      Probo prodesset ei eum. Usu ea fastidii adolescens abhorreant, 
      eam harum timeam id, at his nihil eirmod. Usu ei accusam antiopam recteque, 
      ut quodsi dignissim vim. Vis lorem soleat gubergren cu, 
      mei at quidam intellegat scribentur, et est debet persecuti necessitatibus. 
      Pri ut harum regione gloriatur, detracto inimicus consulatu vel ut.
      Quo eu essent prompta consectetuer, petentium rationibus constituam sed id.    
    </div>
  </div>    
  
  <div class="containerPanel">
    <div class="collapsePanelHeader">
      <div class="headerContent">
        jQuery Collapsible Panel #3
      </div>
      <div class="arrow expand"></div>        
    </div>
    <div class="content" style="display: none">
      Te his summo omnes invenire, id quo nisl minimum recteque, sale debet vim et. 
      Impedit adversarium nam ne, mea ea maiorum persecuti instructior. 
      Omnes repudiandae cu sed, vocent referrentur ei vis, est eu vero regione oporteat. 
      Feugait quaestio reprehendunt sed eu, adhuc sententiae no nec, 
      an nullam incorrupte eloquentiam mel. Ad debet discere insolens mea,
      nam et mediocrem splendide comprehensam. Sea ea numquam legendos eleifend, 
      pro ut munere audire aperiam, ius ex augue quodsi omnesque.   
    </div>
  </div>     
  
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

パネルを展開／折りたたむ

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

パネルを展開／折りたたむ

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!