JavaScript + Ajax 実践サンプル集 - Tabs Collapse Content (コンテンツを閉じる)

Tabs Collapse Content (コンテンツを閉じる)

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

このサンプルは、jQuery UIのtabsプラグインを使用してコンテンツをタブで切り替えます。[Tab1-3]をクリックするとコンテンツが表示されます。コンテンツが表示されている状態で、再度タブをクリックするとコンテンツを閉じます。

$("#tabs").tabs({
  deselectable: true
});

<!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>jQuery UI Tabs - Collapse content</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    div.demo { width: 400px; }
  </style>
  <script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.core.js" type="text/javascript"></script>
  <script src="jQuery/UI/ui.tabs.js" type="text/javascript"></script>
  
	<script type="text/javascript">
	  $(function() {
	    $("#tabs").tabs({
	      deselectable: true
	    });
	  });
	</script>
  
</head>
<body>
<div class="demo">

<div id="tabs">
	  <ul>
		  <li><a href="#tabs-1">Tab 1</a></li>
		  <li><a href="#tabs-2">Tab 2</a></li>
		  <li><a href="#tabs-3">Tab 3</a></li>
	  </ul>
	  <div id="tabs-1">
	    <p><strong>このタブを再度クリックするとコンテンツを閉じます.</strong></p>
		  <p>
        Lorem ipsum id feugiat mentitum definitiones usu, his ex habemus accusata disputationi, 
        has et solet lobortis reformidans. Ad mei lucilius prodesset deterruisset. 
        Debitis impedit pertinax cu his, ad pri modo putent consequuntur. 
        Albucius eligendi quaerendum eos ex, postea nemore appetere sit ex. 
        Ei luptatum apeirian mei, vix in vero voluptatibus. 
        At discere petentium patrioque nec, nam dico accusam fierent cu.		  
		  </p>
	  </div>
	  <div id="tabs-2">
	    <p><strong>このタブを再度クリックするとコンテンツを閉じます.</strong></p>
		  <p>
        Vix ea semper detracto, cu eam brute nostro eirmod. 
        Et qui legere repudiare consectetuer, dicam graeci reformidans nec te, 
        ad duis elaboraret quo. 
        Rebum fabulas dignissim mea eu, eligendi moderatius ad vel, 
        sea falli debet viderer an. Aliquid adolescens voluptaria nam an, 
        minim bonorum interesset no mea. Facete saperet nonummy ex vel, 
        ne qui salutandi consulatu conceptam, pericula erroribus vis ei. 
        Duo ei putant placerat accusata.
		  </p>
	  </div>
	  <div id="tabs-3">
	    <p><strong>このタブを再度クリックするとコンテンツを閉じます.</strong></p>
		  <p>
        Ne vim principes gubergren posidonium, no reque accusata cum. 
        Dicta cetero vivendum eu vix, sint velit temporibus ad vel, 
        qui in puto prompta erroribus. 
        Singulis aliquando voluptatibus an eos, per agam solet accumsan ne. 
        Duo dicam sensibus periculis ne, facer altera dissentias est in. 
        Cibo option aperiam ea mea, alii ancillae sadipscing cum et, ea veniam eligendi adipisci usu. 
        Cu has molestie probatus philosophia, ad pri virtute consulatu interpretaris.		  
		  </p>
		  <p>
        Sint nonumy animal no sea, eum id sanctus omnesque detraxit, 
        nostro propriae in eum. Quo solet possit eripuit ea, exerci volumus pri ex. 
        Magna singulis theophrastus ea mel, homero fierent instructior ne quo, 
        assum omnium duo ex. Justo liber partiendo ad sed, qui oratio lobortis ei.
        Eos at eruditi gubergren dissentiet, est no takimata pertinax salutatus.
      </p>
	  </div>
  </div>

</div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

Tabs Collapse Content (コンテンツを閉じる)

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

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

Tabs Collapse Content (コンテンツを閉じる)

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

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