外部アコーディオンを開く/閉じるボタン

Question

追加ボタンを使用してアコーディオンを開閉するには、助けが必要です。ここで

は、ボタンとアコーディオンの例である：

$(function() { 
 
    $("#tab1").accordion({ 
 
     collapsible: true, active: false, heightStyle: "content" 
 
    }); 
 
    $("#tab2").accordion({ 
 
     collapsible: true, active: false, heightStyle: "content" 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<div id="tab1"> 
 
    <h3>Tab 1</h3> 
 
    <div>1234567890 Text</div> 
 
</div> 
 
<div id="tab2"> 
 
    <h3>Tab 2</h3> 
 
    <div>1234567890 Text 2</div> 
 
</div> 
 
<button><span>Open/Close Tab1</span></button> 
 
<button><span>Open/Close Tab2</span></button>

はあなたの助けをありがとう！

Answer 1

手動でクリックイベントをトリガすることができます：http://api.jqueryui.com/accordion/#option-active：

$(function() { 
 
    $("#tab1").accordion({ 
 
     collapsible: true, active: false, heightStyle: "content" 
 
    }); 
 
    $("#tab2").accordion({ 
 
     collapsible: true, active: false, heightStyle: "content" 
 
    }); 
 

 
    $('button').first().click(function(){ 
 
     $('h3').first().click(); 
 
    }); 
 
    $('button').last().click(function(){ 
 
     $('h3').last().click(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<div id="tab1"> 
 
    <h3>Tab 1</h3> 
 
    <div>1234567890 Text</div> 
 
</div> 
 
<div id="tab2"> 
 
    <h3>Tab 2</h3> 
 
    <div>1234567890 Text 2</div> 
 
</div> 
 
<button><span>Open/Close Tab1</span></button> 
 
<button><span>Open/Close Tab2</span></button>

Answer 2

をアコーディオンのAPIから "アクティブ" を使用します。

$(function() { 
 
    $("#tab1").accordion({ 
 
     collapsible: true, active: false, heightStyle: "content" 
 
    }); 
 
    $("#tab2").accordion({ 
 
     collapsible: true, active: false, heightStyle: "content" 
 
    }); 
 
    $('.toggle-tab').on('click', function(){ 
 
     var $accordion = $('#tab' + $(this).data('tab')); 
 
     var state = $accordion.accordion('option', 'active'); 
 
     $accordion.accordion('option', {active: state === 0 ? false : 0 }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<div id="tab1"> 
 
    <h3>Tab 1</h3> 
 
    <div>1234567890 Text</div> 
 
</div> 
 
<div id="tab2"> 
 
    <h3>Tab 2</h3> 
 
    <div>1234567890 Text 2</div> 
 
</div> 
 
<button class="toggle-tab" data-tab="1"><span>Open/Close Tab1</span></button> 
 
<button class="toggle-tab" data-tab="2"><span>Open/Close Tab2</span></button>