CODEWITHSUNDEEP
javascriptjquery-ui
nichoio
nichoio

Reputation: 7587

JQuery UI Accordion - Nested Accordions not animated

I have multiple nested JQuery UI accordions - one accordion contains another. Look at the attached fiddle and the animation (or rather missing animation) after unfolding the nested accordion which is not visible at first. It's hard to explain by words.

How can i achieve a smooth "pushing" animation?

HTML with accordions:

<div id="accordion_broadcasts">
  <div id="acc_broadcasts_header">
    <div class="accordion_descriptions">
      <div class="acc_descriptions_header">
        <table class="broadcast_table">
          <tr class="broadcast_tr">
            <td class="broadcast_td1">foobar</td>
            <td class="broadcast_td2">CLICK (working)</td>
          </tr>
        </table>
      </div>
      <div>
        only visible if unfolded
      </div>
    </div>
  </div>
  <div>
    <div class="accordion_descriptions">
      <div class="acc_descriptions_header">
        <table class="broadcast_table">
          <tr class="broadcast_tr">
            <td class="broadcast_td1">foobar</td>
            <td class="broadcast_td2">CLICK (poorly animated)</td>
          </tr>
        </table>
      </div>
      <div>
        only visible if unfolded
      </div>
    </div>
  </div>
</div>

Javascript:

//Outer accordion
$( "#accordion_broadcasts" ).accordion({
  collapsible: true,
  active: false,
  disabled: true,
  header: "#acc_broadcasts_header",
  activate: function(event, ui) {        
    $( ".accordion_descriptions" ).accordion("refresh");
    $( "#accordion_broadcasts" ).accordion("refresh");
  }
});

//Inner accordion    
$( ".accordion_descriptions" ).accordion({
  collapsible: true,
  active: false,
  header: ".acc_descriptions_header",
  disabled: true,
  activate: function(event, ui) {        
    $( ".accordion_descriptions" ).accordion("refresh");
    $( "#accordion_broadcasts" ).accordion("refresh");
  }
});

//fold outer accordion    
$("#unfold_broadcast").click(function(){
  if ($("#accordion_broadcasts").accordion( "option", "active") === false){
    $( "#accordion_broadcasts" ).accordion({active: 0});
  }
  else{
    $( "#accordion_broadcasts" ).accordion({active: false});
  }

  $( "#unfold_broadcast" ).remove();
});

//fold inner accordion   
$(".broadcast_td2").click(function(){
  if ($(this).closest(".accordion_descriptions").accordion( "option", "active") === false){
    $(this).closest(".accordion_descriptions").accordion({active: 0});
  }
  else{
    $(this).closest(".accordion_descriptions").accordion({active: false});
  }
});

JSFiddle

Note 1: The jsfiddle example is a simplified version of my actual code. The problem remains the same.

Note 2: There are probably some unnecessary refresh calls on these accordions. I've played around with the refresh method until the accordions worked somewhat.

Upvotes: 0

Views: 299

Answers (1)

Vokabelsalat
Vokabelsalat

Reputation: 36

The magic is to add heightStyle: "content" to the properties of the outer accordion.

So its Javascript looks like that:

$( "#accordion_broadcasts" ).accordion({
  collapsible: true,
  active: false,
  disabled: true,
  header: "#acc_broadcasts_header",
  heightStyle: "content",
  activate: function(event, ui) {        
    $( ".accordion_descriptions" ).accordion("refresh");
    $( "#accordion_broadcasts" ).accordion("refresh");
  }
});

See my updated JSFiddle.

I had the same problem, and fixed it this way. During my research, i found out, that the content height of the outer accordion was zero while it was unfolded. So setting a height to the content div would be a solution, if you now the exact size of the nested content, but heightStyle: "content" does this for you.

Upvotes: 2

Related Questions