CODEWITHSUNDEEP
jqueryheightaccordion
tiiin4
tiiin4

Reputation: 539

Jquery Accordion With Table inside

I'm trying to accomplish the following:

<div id="accordion">
<% i = 0 %>
        @handle_paises.each do |pais|          
            @handle_publi_pais = Paquete.paque_pais(pais.id_pais)
            if !@handle_publi_pais.blank? %>
              <h3><a href="#"><%= pais.nombre %></a></h3>
              <div class="section">
                <table border="0" cellspacing="0" cellpadding="0" id="paque_tr_5">
                  <%@handle_publi_pais.each do |pais_cargado|%>
                      <tr>
                        <td width="71%" align="left" valign="top" id="paque_tr_1">
                          <%= pais_cargado.nombre_promocion.to_s %>
                        </td>
                        <td width="10%" align="center" valign="bottom" id="paque_tr_3">
                          <a href="xxx" title="yyy">
                            <img src="yyy"  width="26" height="18" border="0"/>
                          </a>
                        </td>
                      </tr>
                    <% i += 1 end%>
                </table>
              </div>
            <% end%>
</div>

however, each section is rendered with a HUGE height (which is added I don't know how to the (and no, this class doesn't have any entry on any css file)

Why is this happening?

Thanxxx

UPDATE:

this is the output of the 

<div class="section ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 663.6px;" role="tabpanel">

Here's the JSFIDDLE: http://jsfiddle.net/GaqLZ/2/

Upvotes: 2

Views: 3632

Answers (2)

River city Phoenix
River city Phoenix

Reputation: 75

heightStyle: "fill" is the property you're looking for. 

$( "#accordion" ).accordion({ collapsible: true, heightStyle: "fill" });

Upvotes: 2

nzifnab
nzifnab

Reputation: 16110

I believe what you're looking for is the autoHeight option:

$(function() {
    $("#accordion").accordion({autoHeight: false, collapsible: true});    
});

autoHeight defaults to true and makes all of the div's the same size. So it looks for the one that is the tallest, and uses that height for every single one. autoHeight: false makes each individual div only as tall as it's content.

You can add the collapsible: true property if you want the individual nodes to be close-able after opening them.

Upvotes: 1

Related Questions