jquery - jquery uiアコーディオンと高さが動的に拡張

Question

Chosen.js によって駆動される入力とドロップダウンをそれぞれ保持する 2 つのコンテンツ領域を持つアコーディオンがあります。

ユーザーが入力フィールドをクリックすると、ドロップダウンが表示され、ユーザーはリストから多くの選択肢を選択して、選択したキーワードに基づいて検索を絞り込むことができます。

私の問題は、いくつかの選択肢が選択されると、上部のアコーディオンの下にあるアコーディオン h3 が右に移動して、入力用のスペースを確保することです (ドロップダウンは問題なくドロップダウンします。

アコーディオン用に次の javascript のさまざまなバージョンを試しましたが (heightstyle を変更)、さまざまな結果が得られましたが、まったく正しいものはありませんでした。ドロップダウンはアコーディオン領域の外にある必要があり、ユーザーが選択している間、「これらのいずれか」「これらのすべて」のラジオとチェックボックスが表示されたままになる必要があります。

jQuery( function() {
jQuery( ".accordionSearch" ).accordion( {
  heightStyle: "content",
  activate: function( event, ui ) {
if (ui.newHeader.attr('id') == 'skill-search-header') {
  which_search_string = 'skill';
      doSearch();
}
else if (ui.newHeader.attr('id') == 'project-search-header') {
  which_search_string = 'project';
      doSearch();
}
  }
} );
} );

これが私のjsfiddleです