JqueryUI-アコーディオン

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

構文

ザ・ accordion() メソッドは2つの形式で使用できます-

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

  • $（selector、context）.accordion（ "action"、params）メソッド

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

アコーディオン（オプション）メソッドは、HTML要素とその内容は、アコーディオンメニューとして扱われ、管理されるべきであることを宣言します。オプション関与メニューの外観と動作を指定するオブジェクトであるパラメータ。

構文

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

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

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

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
1 アクティブ

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

Option - active

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

これはタイプの可能性があります-

  • Boolean− falseに設定すると、すべてのパネルが折りたたまれます。これには、折りたたみ可能なオプションがtrueである必要があります。

  • Integer−アクティブ（オープン）のパネルのゼロベースのインデックス。負の値は、最後のパネルから後方に移動するパネルを選択します。

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2 アニメート

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

Option - animate

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

これはタイプの可能性があります-

  • Boolean−値がfalseの場合、アニメーションは無効になります。

  • Number −これはミリ秒単位の期間です

  • String −デフォルトの期間で使用するイージングの名前。

  • Object −イージングとデュレーションのプロパティを持つアニメーション設定。

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 折りたたみ可能

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

Option - collapsible

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

Syntax

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

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

Option - disabled

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

Syntax

$( ".selector" ).accordion(
   { disabled: true }
);
5 イベント

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

Option - event

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

Syntax

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

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

Option - header

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

Syntax

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

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

Option - heightStyle

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

可能な値は次のとおりです。

  • auto −すべてのパネルは、最も高いパネルの高さに設定されます。

  • fill −アコーディオンの親の高さに基づいて、使用可能な高さに拡張します。

  • content −各パネルの高さはその内容と同じです。

Syntax

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8 アイコン

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

Option - icons

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

Syntax

$( ".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

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

折りたたみ式の使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ここでは、折りたたみ可能をtrueに設定しています。アコーディオンヘッダーをクリックすると、アクティブなセクションを折りたたむことができます。

heightStyleの使用

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

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

ここでは2つのアコーディオンがあります。最初のアコーディオンのheightStyleオプションはcontentに設定されています。これにより、アコーディオンパネルは本来の高さを維持できます。第二にアコーディオンがありheightStyleのにオプションセットを塗りつぶし、スクリプトが自動的にその親コンテナの高さにアコーディオンの寸法を設定します。

$（selector、context）.accordion（ "action"、params）メソッド

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

構文

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

次の表に、この方法で使用できるさまざまなアクションを示します。

シニア番号 アクションと説明
1 破壊

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

Action - destroy

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

Syntax

$(".selector").accordion("destroy");
2 無効にする

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

Action - disable

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

Syntax

$(".selector").accordion("disable");
3 有効にする

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

Action - enable

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

Syntax

$(".selector").accordion("enable");
4 option（optionName）

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 オプション

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

Action - option

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

Syntax

var options = $( ".selector" ).accordion( "option" );
6 option（optionName、value）

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

$( ".selector" ).accordion( "option", { disabled: true } );
8 リフレッシュ

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

Action - refresh

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

Syntax

$(".selector").accordion("refresh");
9 ウィジェット

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

Action - widget

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

Syntax

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.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

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

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

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

シニア番号 イベントの方法と説明
1 activate（event、ui）

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

Event - activate(event, ui)

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

  • newHeader −アクティブ化されたばかりのヘッダーを表すjQueryオブジェクト。

  • oldHeader −非アクティブ化されたばかりのヘッダーを表すjQueryオブジェクト。

  • newPanel −アクティブ化されたばかりのパネルを表すjQueryオブジェクト。

  • oldPanel −非アクティブ化されたばかりのパネルを表すjQueryオブジェクト。

Syntax

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

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

Event - beforeActivate(event, ui)

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

  • newHeader −アクティブ化されようとしているヘッダーを表すjQueryオブジェクト。

  • oldHeader −非アクティブ化されようとしているヘッダーを表すjQueryオブジェクト。

  • newPanel −アクティブ化されようとしているパネルを表すjQueryオブジェクト。

  • oldPanel −非アクティブ化されようとしているパネルを表すjQueryオブジェクト。

Syntax

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

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

Event - create(event, ui)

このイベントは、アコーディオンが作成されたときにトリガーされます。ここで、eventはEvent型であり、uiはObject型です。uiの可能な値は次のとおりです。

  • header −アクティブなヘッダーを表すjQueryオブジェクト。

  • panel −アクティブなパネルを表すjQueryオブジェクト。

Syntax

$( ".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").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<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.htm javascriptをサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved