JavaScript + Ajax 実践サンプル集

パネルを開閉する

説明補足説明コードコメント投稿

このサンプルは、jQueryのslideUp(), slideDown(), slideToggle()などのAPIを利用してgmailの受信トレイのようなインタフェースを実装しています。サンプルのヘッダーをクリックするとメッセージの本文が開いて表示されます。再度ヘッダーをクリックするとメッセージ本文が閉じます。[すべて閉じる]をクリックすると、すべてのメッセージが閉じます。[すべて表示]をクリックすると受信メールの全件(9件)を表示します。[5件のみ表示]をクリックすると、最新のメッセージを5件表示します。

このサンプルを編集して試してみる | 新着サンプルのメールを受け取る

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

２番目以降のメッセージ本文を非表示にするには、.message_bodyに:gt(0)を付加してhide()します。デフォルトで新着メッセージ５件のみ表示するようにしていますので、liに:gt(4)を付加して６番目以降のメッセージをhide()します。

messaga_headには、click時のイベントハンドラを登録して、ヘッダーをクリックしたときにslideToggle()で表示/非表示に切り替えます。

[すべて閉じる]をクリックしたときは、slideUp()を実行してメッセージ本文を閉じます。[すべて表示][5件のみ表示]をクリックしたときは、slideDown(), slideUp()を実行します。slideDown()は表示、slideUp()は非表示に切り替えます。

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();

//hide message li after the 5th
$(".message_list li:gt(4)").hide();


//toggle message_body
$(".message_head").click(function(){
  $(this).next(".message_body").slideToggle(500)
  return false;
});

//collapse all messages
$(".collpase_all_message").click(function(){
  $(".message_body").slideUp(500)
  return false;
});

//show all messages
$(".show_all_message").click(function(){
  $(this).hide()
  $(".show_recent_only").show()
  $(".message_list li:gt(4)").slideDown()
  return false;
});

//show recent messages only
$(".show_recent_only").click(function(){
  $(this).hide()
  $(".show_all_message").show()
  $(".message_list li:gt(4)").slideUp()
  return false;
});

<ol class="message_list">
  <li>
    <p class="message_head">
      <cite>taro:</cite> <span class="timestamp">8月9日</span>
    </p>
    <div class="message_body">
      <p>メッセージ本文・・・</p>
    </div>
  </li>
</ol>

<p class="collapse_buttons">
  <a href="#" class="show_all_message">すべて表示 (9)</a> 
  <a href="#" class="show_recent_only">5件のみ表示</a> 
  <a href="#" class="collpase_all_message">すべて閉じる</a>
</p>

<!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>Collapsible Message Panels</title>
  <style type="text/css">
    *
    {
      margin: 0;
      padding: 0;
    }
    body
    {
      margin: 10px auto;
      width: 570px;
      font: 75%/120% Arial, Helvetica, sans-serif;
    }
    p
    {
      padding: 0 0 1em;
    }
    .message_list
    {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 383px;
    }
    .message_list li
    {
      padding: 0;
      margin: 0;
      background: url(images/tutorials/message-bar.gif) no-repeat;
    }
    .message_head
    {
      padding: 5px 10px;
      cursor: pointer;
      position: relative;
    }
    .message_head .timestamp
    {
      color: #666666;
      font-size: 95%;
      position: absolute;
      right: 10px;
      top: 5px;
    }
    .message_head cite
    {
      font-size: 100%;
      font-weight: bold;
      font-style: normal;
    }
    .message_body
    {
      padding: 5px 10px 15px;
    }
    .collapse_buttons
    {
      text-align: right;
      border-top: solid 1px #e4e4e4;
      padding: 5px 0;
      width: 383px;
    }
    .collapse_buttons a
    {
      margin-left: 15px;
      float: right;
    }
    .show_all_message
    {
      background: url(images/tutorials/tall-down-arrow.gif) no-repeat right center;
      padding-right: 12px;
    }
    .show_recent_only
    {
      display: none;
      background: url(images/tutorials/tall-up-arrow.gif) no-repeat right center;
      padding-right: 12px;
    }
    .collpase_all_message
    {
      background: url(images/tutorials/collapse-all.gif) no-repeat right center;
      padding-right: 12px;
      color: #666666;
    }
  </style>

//toggle message_body
	    $(".message_head").click(function(){
		    $(this).next(".message_body").slideToggle(500)
		    return false;
	    });

//collapse all messages
	    $(".collpase_all_message").click(function(){
		    $(".message_body").slideUp(500)
		    return false;
	    });

//show all messages
	    $(".show_all_message").click(function(){
		    $(this).hide()
		    $(".show_recent_only").show()
		    $(".message_list li:gt(4)").slideDown()
		    return false;
	    });

//show recent messages only
	    $(".show_recent_only").click(function(){
		    $(this).hide()
		    $(".show_all_message").show()
		    $(".message_list li:gt(4)").slideUp()
		    return false;
	    });

});
  </script>

</head>

<body>

<ol class="message_list">
    <li>
      <p class="message_head">
        <cite>taro:</cite> <span class="timestamp">8月9日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>hanako:</cite> <span class="timestamp">8月8日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>taro:</cite> <span class="timestamp">8月7日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>hanako:</cite> <span class="timestamp">8月6日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>taro:</cite> <span class="timestamp">8月5日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>hanako:</cite> <span class="timestamp">8月4日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>taro:</cite> <span class="timestamp">8月3日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>hanako:</cite> <span class="timestamp">8月2日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
    <li>
      <p class="message_head">
        <cite>haro:</cite> <span class="timestamp">8月1日</span>
      </p>
      <div class="message_body">
        <p>メッセージ本文・・・</p>
      </div>
    </li>
  </ol>
  
  <p class="collapse_buttons">
    <a href="#" class="show_all_message">すべて表示 (9)</a> 
    <a href="#" class="show_recent_only">5件のみ表示</a> 
    <a href="#" class="collpase_all_message">すべて閉じる</a>
  </p>

</body>
</html>

このサンプルを編集して試してみる!

//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();

//hide message li after the 5th
$(".message_list li:gt(4)").hide();


//toggle message_body
$(".message_head").click(function(){
  $(this).next(".message_body").slideToggle(500)
  return false;
});

//collapse all messages
$(".collpase_all_message").click(function(){
  $(".message_body").slideUp(500)
  return false;
});

//show all messages
$(".show_all_message").click(function(){
  $(this).hide()
  $(".show_recent_only").show()
  $(".message_list li:gt(4)").slideDown()
  return false;
});

//show recent messages only
$(".show_recent_only").click(function(){
  $(this).hide()
  $(".show_all_message").show()
  $(".message_list li:gt(4)").slideUp()
  return false;
});

<ol class="message_list">
  <li>
    <p class="message_head">
      <cite>taro:</cite> <span class="timestamp">8月9日</span>
    </p>
    <div class="message_body">
      <p>メッセージ本文・・・</p>
    </div>
  </li>
</ol>

<p class="collapse_buttons">
  <a href="#" class="show_all_message">すべて表示 (9)</a> 
  <a href="#" class="show_recent_only">5件のみ表示</a> 
  <a href="#" class="collpase_all_message">すべて閉じる</a>
</p>

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

パネルを開閉する