Jqueryui-accordion

提供：Dev Guides
移動先:案内、検索

JqueryUI-アコーディオン

jQueryUIのアコーディオンウィジェットは、jQueryベースの拡張および折りたたみ可能なコンテンツホルダーであり、セクションに分割され、おそらくタブのように見えます。 jQueryUIはこれを実現するためにaccordion（）メソッドを提供します。

構文

  • accordion（）*メソッドは2つの形式で使用できます-
  • link：/jqueryui/jqueryui_accordion＃accordion_options [$（selector、context）.accordion（options）]メソッド
  • link：/jqueryui/jqueryui_accordion＃accordion_methods [$（selector、context）.accordion（ "action"、params）]メソッド

$（セレクター、コンテキスト）.accordion（オプション）メソッド

_accordion（オプション）_メソッドは、HTML要素とそのコンテンツをアコーディオンメニューとして扱い、管理することを宣言します。 _options_パラメーターは、関連するメニューの外観と動作を指定するオブジェクトです。

構文

$(selector, context).accordion (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します- 

$(selector, context).accordion({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description
1

active

ページに最初にアクセスしたときに開いているメニューのインデックスを示します。 デフォルトでは、その値は 0 、つまり最初のメニューです。

オプション-アクティブ

ページに最初にアクセスしたときに開いているメニューのインデックスを示します。 デフォルトでは、その値は 0 、つまり最初のメニューです。

これはタイプにすることができます-

  • ブール-_false_に設定すると、すべてのパネルが折りたたまれます。 これには、折りたたみオプションが_true_である必要があります。
  • 整数-アクティブな（開いている）パネルのゼロから始まるインデックス。 負の値は、最後のパネルから逆方向に進むパネルを選択します。

構文 

$( ".selector" ).accordion(
   { active: 2 }
);
2

animate

このオプションは、変化するパネルをアニメーション化する方法を設定するために使用されます。 デフォルトでは、その値は \ {} です。

オプション-アニメーション

このオプションは、変化するパネルをアニメーション化する方法を設定するために使用されます。 デフォルトでは、その値は \ {} です。

これはタイプにすることができます-

  • ブール-_false_の値はアニメーションを無効にします。
  • Number -これはミリ秒単位の期間です
  • String -デフォルト期間で使用するイージングの名前。
  • オブジェクト-イージングと期間のプロパティを持つアニメーション設定。

構文 

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3

collapsible

このオプションを_true_に設定すると、ユーザーはメニューをクリックしてメニューを閉じることができます。 デフォルトでは、開いているパネルのヘッ​​ダーをクリックしても効果はありません。 デフォルトでは、その値は false です。

オプション-折りたたみ可能

このオプションを_true_に設定すると、ユーザーはメニューをクリックしてメニューを閉じることができます。 デフォルトでは、開いているパネルのヘッ​​ダーをクリックしても効果はありません。 デフォルトでは、その値は false です。

構文 

$( ".selector" ).accordion(
   { collapsible: true }
);
4

disabled

このオプションを_true_に設定すると、アコーディオンが無効になります。 デフォルトでは、その値は false です。

オプション-無効

このオプションを_true_に設定すると、アコーディオンが無効になります。 デフォルトでは、その値は false です。

構文 

$( ".selector" ).accordion(
   { disabled: true }
);
5

event

このオプションは、アコーディオンヘッダーの選択に使用されるイベントを指定します。 デフォルトでは、その値は*クリック*です。

オプション-イベント

このオプションは、アコーディオンヘッダーの選択に使用されるイベントを指定します。 デフォルトでは、その値は*クリック*です。

構文 

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6

header

このオプションは、ヘッダー要素を識別するためのデフォルトのパターンをオーバーライドするセレクターまたは要素を指定します。 デフォルトでは、その値は*> li>：first-child、>：not（li）：even *です。

オプション-ヘッダー

このオプションは、ヘッダー要素を識別するためのデフォルトのパターンをオーバーライドするセレクターまたは要素を指定します。 デフォルトでは、その値は*> li>：first-child、>：not（li）：even *です。

構文 

$( ".selector" ).accordion(
   { header: "h3" }
);
7

heightStyle

このオプションは、アコーディオンとパネルの高さを制御するために使用されます。 デフォルトでは、その値は auto です。

  • オプション-heightStyle *

このオプションは、アコーディオンとパネルの高さを制御するために使用されます。 デフォルトでは、その値は auto です。

可能な値は-

  • auto -すべてのパネルは最も高いパネルの高さに設定されます。
  • fill -アコーディオンの親の高さに基づいて利用可能な高さに拡張します。
  • content -各パネルの高さはコンテンツの高さのみです。

構文 

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8

icons

このオプションは、開いたパネルと閉じたパネルのヘッ​​ダーテキストの左側に使用するアイコンを定義するオブジェクトです。 閉じたパネルに使用するアイコンは_header_という名前のプロパティとして指定され、開いているパネルに使用するアイコンは_headerSelected_という名前のプロパティとして指定されます。 デフォルトでは、その値は \ {"header"： "ui-icon-triangle-1-e"、 "activeHeader"： "ui-icon-triangle-1-s"} です。

オプション-アイコン

このオプションは、開いたパネルと閉じたパネルのヘッ​​ダーテキストの左側に使用するアイコンを定義するオブジェクトです。 閉じたパネルに使用するアイコンは_header_という名前のプロパティとして指定され、開いているパネルに使用するアイコンは_headerSelected_という名前のプロパティとして指定されます。 デフォルトでは、その値は \ {"header"： "ui-icon-triangle-1-e"、 "activeHeader"： "ui-icon-triangle-1-s"} です。

構文 

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

次のセクションでは、アコーディオンウィジェット機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* accordion（）*メソッドにパラメーターを渡さない、アコーディオンウィジェット機能の簡単な例を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>

      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

ヘッダー（タブ1、タブ2、タブ3）をクリックして、タブのように論理セクションに分割されたコンテンツを展開/折りたたみます。

折りたたみ式の使用

次の例は、JqueryUIのアコーディオンウィジェットで3つのオプション*折りたたみ可能*を使用する方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>

      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore magna
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

ここでは、collapsibleを_true_に設定しました。 アコーディオンヘッダーをクリックすると、アクティブなセクションが折りたたまれます。

heightStyleの使用

次の例は、JqueryUIのアコーディオンウィジェットで3つのオプション heightStyle を使用する方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>

      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>

   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua.
               </p>
            </div>
         </div>
      </div><br><br>

      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua.
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

ここには2つのアコーディオンがあり、最初のアコーディオンには_content_に設定された_heightStyle_オプションがあります。これにより、アコーディオンパネルはネイティブの高さを維持できます。 2番目のアコーディオンには_heightStyle_オプションが_fill_に設定されており、スクリプトは自動的にアコーディオンの寸法をその親コン​​テナの高さに設定します。

[accordion_methods]#

$（セレクター、コンテキスト）.accordion（ "action"、params）メソッド

_accordion（ "action"、params）_メソッドは、アコーディオンメニューの選択/選択解除など、アコーディオン要素に対してアクションを実行できます。 アクションは、最初の引数で文字列として指定されます（たとえば、「disable」はすべてのメニューを無効にします）。 次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).accordion ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-

Sr.No. Action & Description
1

destroy

このアクションは、要素のアコーディオン機能を完全に破壊します。 要素は初期化前の状態に戻ります。

アクション-破壊

このアクションは、要素のアコーディオン機能を完全に破壊します。 要素は初期化前の状態に戻ります。

構文 

$(".selector").accordion("destroy");
2

disable

このアクションにより、すべてのメニューが無効になります。 クリックは考慮されません。 このメソッドは引数を取りません。

アクション-無効

このアクションにより、すべてのメニューが無効になります。 クリックは考慮されません。 このメソッドは引数を取りません。

構文 

$(".selector").accordion("disable");
3

enable

このアクションにより、すべてのメニューが再びアクティブになります。 クリックが再び考慮されます。 このメソッドは引数を取りません。

アクション-有効

このアクションにより、すべてのメニューが再びアクティブになります。 クリックが再び考慮されます。 このメソッドは引数を取りません。

構文 

$(".selector").accordion("enable");
4

option( optionName )

このアクションは、指定された_optionName_に現在関連付けられているアコーディオン要素の値を取得します。 これは引数として文字列値を取ります。

アクション-option（optionName）

このアクションは、指定された_optionName_に現在関連付けられているアコーディオン要素の値を取得します。 これは引数として文字列値を取ります。

構文 

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5

option

このアクションは、現在のアコーディオンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。

アクション-オプション

このアクションは、現在のアコーディオンオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。

構文 

var options = $( ".selector" ).accordion( "option" );
6

option( optionName, value )

このアクションは、指定されたoptionNameに関連付けられたアコーディオンオプションの値を設定します。

アクション-option（optionName、value）

このアクションは、指定されたoptionNameに関連付けられたアコーディオンオプションの値を設定します。

構文 

$( ".selector" ).accordion( "option", "disabled", true );
7

option( options )

このアクションは、アコーディオンの1つ以上のオプションを設定します。

アクション-オプション（オプション）

このアクションは、アコーディオンの1つ以上のオプションを設定します。 _options_は、設定するオプションと値のペアのマップです。

構文 

$( ".selector" ).accordion( "option", { disabled: true } );
8

refresh

このアクションは、DOMで直接追加または削除されたヘッダーとパネルを処理します。 次に、アコーディオンパネルの高さを再計算します。 結果は、コンテンツとheightStyleオプションによって異なります。 このメソッドは引数を取りません。

アクション-更新

このアクションは、DOMで直接追加または削除されたヘッダーとパネルを処理します。 次に、アコーディオンパネルの高さを再計算します。 結果は、コンテンツとheightStyleオプションによって異なります。 このメソッドは引数を取りません。

構文 

$(".selector").accordion("refresh");
9

widget

このアクションは、アコーディオンウィジェット要素を返します。 _ui-accordion_クラス名で注釈が付けられたもの。

アクション-ウィジェット

このアクションは、アコーディオンウィジェット要素を返します。 _ui-accordion_クラス名で注釈が付けられたもの。

構文 

var widget = $( ".selector" ).accordion( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。 次の例は、_option（optionName、value）_メソッドの使用方法を示しています。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>

      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna
                  aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea
                  commodo consequat.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked
               value = "enable">Enable accordion
         </div>
     </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ここでは、アコーディオンの有効化と無効化を示します。 それぞれのラジオボタンを選択して、各アクションを確認します。

アコーディオン要素のイベント管理

前のセクションで見たアコーディオン（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description
1

activate(event, ui)

このイベントは、メニューがアクティブになるとトリガーされます。 このイベントはパネルのアクティブ化でのみ発生し、アコーディオンウィジェットが作成されたときの初期パネルでは発生しません。

イベント-activate（event、ui）

このイベントは、メニューがアクティブになるとトリガーされます。 このイベントはパネルのアクティブ化でのみ発生し、アコーディオンウィジェットが作成されたときの初期パネルでは発生しません。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • newHeader -アクティブ化されたばかりのヘッダーを表すjQueryオブジェクト。
  • oldHeader -非アクティブ化されたばかりのヘッダーを表すjQueryオブジェクト。
  • newPanel -アクティブ化されたばかりのパネルを表すjQueryオブジェクト。
  • oldPanel -非アクティブ化されたばかりのパネルを表すjQueryオブジェクト。

構文 

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2

beforeActivate(event, ui)

このイベントは、パネルがアクティブになる前にトリガーされます。 このイベントをキャンセルして、パネルがアクティブにならないようにすることができます。

イベント-beforeActivate（event、ui）

このイベントは、パネルがアクティブになる前にトリガーされます。 このイベントをキャンセルして、パネルがアクティブにならないようにすることができます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • newHeader -アクティブ化されようとしているヘッダーを表すjQueryオブジェクト。
  • oldHeader -非アクティブ化しようとしているヘッダーを表すjQueryオブジェクト。
  • newPanel -アクティブ化されようとしているパネルを表すjQueryオブジェクト。
  • oldPanel -非アクティブ化されようとしているパネルを表すjQueryオブジェクト。

構文 

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3

create(event, ui)

このイベントは、アコーディオンが作成されるとトリガーされます。

イベント-create（event、ui）

このイベントは、アコーディオンが作成されるとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

  • header -アクティブなヘッダーを表すjQueryオブジェクト。
  • panel -アクティブなパネルを表すjQueryオブジェクト。

構文 

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

例

次の例は、アコーディオンウィジェットでのイベントメソッドの使用方法を示しています。 この例では、create _、 beforeActive_、および_active_イベントの使用方法を示します。 

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result")l ($("span#result")l () +
                     "<b>Created</b><br>");
               },

               beforeActivate : function (event, ui) {
                  $("span#result")l ($("span#result")l () +
                     ", <b>beforeActivate</b><br>");
               },

               activate: function (event, ui) {
                  $("span#result")l ($("span#result")l () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>

      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud
               exercitation ullamco laboris nisi ut aliquip ex ea
               commodo consequat.
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud
               exercitation ullamco laboris nisi ut aliquip ex ea
               commodo consequat.
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit,
               sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua. Ut enim ad minim veniam, quis nostrud
               exercitation ullamco laboris nisi ut aliquip ex ea
               commodo consequat.
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr/>
      <span id = result></span>
   </body>
</html>

上記のコードをHTMLファイル accordionexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

ここでは、イベントに基づいて下部にテキストを表示しています。

「https://www.finddevguides.com/index.php?title=Jqueryui-accordion&oldid=2329」から取得
Powered by MediaWiki