Search jQuery

jQuery Forum

Accordion with columns in <h3> tag (like <th> in table) is it possible? (Like jExpand for example)

in Getting Started • 9 years ago

Hi All,

Help me please to find how to make a table looks like accordion. jExpand if fine but it loads all data in hidden rows, which is not the way I want to do. The simple accordion is right fine for me, but I can't find the way how to create a columns and header. Is it possible to use div's with fixed width or <th> and <tr> table tags to make a simple accordion row headers like table rows with fixed or scalable widths?

Thank you anyway for the time your spend to read my question.

Replies(2)

popnoodles

Re: Accordion with columns in <h3> tag (like <th> in table) is it possible? (Like jExpand for example)

9 years ago

Yes you can create fixed width columns if you wanted but if it's tabular data I would stick with a table. You can have the row behave like an accordion by making its height nothing after showing it, then animating its height. Then the opposite on close.

$('#somerow').show().height(0).animate({height:'auto'},500);

slideDown and slideUp might even work.

panda_1

Re: Re: Accordion with columns in <h3> tag (like <th> in table) is it possible? (Like jExpand for example)

9 years ago

Thank you for replay.

I'd raiser used accordion fixed width columns then table. If something like this is possible:

<div id="accordion_headers">
<div class="column_fixed_header" id="header_1">Column1 header</div>
<div class="column_fixed_header" id="header_2">Column2 header</div>
<div class="column_fixed_header" id="header_3">Column3 header</div>
<div class="column_fixed_header" id="header_4">Column4 header</div>
<div class="column_fixed_header" id="header_5">Column5 header</div>
</div>
<div id="accordion">
<div class="accordion_row" id="1">
<div class="column_fixed" id="cell_1_1">Column1 content</div>
<div class="column_fixed" id="cell_1_2">Column2 content</div>
<div class="column_fixed" id="cell_1_3">Column3 content</div>
<div class="column_fixed" id="cell_1_4">Column4 content</div>
<div class="column_fixed" id="cell_1_5">Column5 content</div>
</div>
<div class="accordion_row_container" id="row_1">Ajax requested content without table structure (random structured content are dependent on linked objects)</div>
<div class="accordion_row" id="2">
<div class="column_fixed" id="cell_2_1">Column1 content</div>
<div class="column_fixed" id="cell_2_2">Column2 content</div>
<div class="column_fixed" id="cell_2_3">Column3 content</div>
<div class="column_fixed" id="cell_2_4">Column4 content</div>
<div class="column_fixed" id="cell_2_5">Column5 content</div>
</div>
<div class="accordion_row_container" id="row_2">Ajax requested content</div>
<div class="accordion_row" id="3">
<div class="column_fixed" id="cell_3_1">Column1 content</div>
<div class="column_fixed" id="cell_3_2">Column2 content</div>
<div class="column_fixed" id="cell_3_3">Column3 content</div>
<div class="column_fixed" id="cell_3_4">Column4 content</div>
<div class="column_fixed" id="cell_3_5">Column5 content</div>
</div>
<div class="accordion_row_container" id="row_3">Ajax requested content</div>
</div>

But I can't figure-out the css for this construction.  

Please help me.

UPD:

I found solution.

css for previous example is:

.column_fixed {float: left; width:150px;}
.accordion_row_container {clear: both;}

Top Reply

Response title

Attachments

jQuery Forum

Accordion with columns in <h3> tag (like <th> in table) is it possible? (Like jExpand for example)

Replies(2)

Re: Accordion with columns in <h3> tag (like <th> in table) is it possible? (Like jExpand for example)

Re: Re: Accordion with columns in <h3> tag (like <th> in table) is it possible? (Like jExpand for example)

Statistics

Tags

Actions