ok So something like this almost(?) does it,
$(".collapse_group[a]").click( function () {
$(this).parent().siblings("tr").slideToggle("fast",
function() {
$(this).each( function() {
if ($(this).css("display") == "block")
$(this).css("display", "");
});
});
});
It is wierd though, sometimes it works and sometimes not, and when
it's not working alot of extra padding/margin is added to the bottom
of the groupelements...
I've also tried this without several tbody's (thought this might be a
incorrect markup quirk) but it's the same thing, hope that someone
could shed some light on this, got me interested :)
Oh and btw I'm using FF1.5.0.9 (it all works without problems in IE7,
no need for the display "fix" there)
///Kristinn
On 2/21/07, Kristinn Sigmundsson <[EMAIL PROTECTED]> wrote:
> First things first, and I could be wrong here, but I believe that the
> correct syntax for a table is:
>
> <table>
> <thead></thead>
> <tfoot></tfoot>
> <tbody></tbody>
> </table>
>
> Not sure several tbody elements is correct... anyway, I did some test,
> and got some freaky results, I think that the problem lies with the
> style "display: block" being applied, works fine in IE7 but not very
> pretty in FF... you can test this:
> $(".collapse_group").click( function () {
> $(this).parent().siblings("tr").slideToggle("fast");
> });
> I'm sorry that I don't have a definite answer to your question though.
> What I would do is probably make another table inside a tr with the
> data and wrap it in a div and see if that would work, OR maybe have a
> callback to the slideToggle that changes the display style depending
> whether it visible or not...
>
> good luck though, someone here most probably have a better answer, but
> this is something to get you started :P
>
> //Kristinn
>
> On 2/21/07, rolfsf <[EMAIL PROTECTED]> wrote:
> >
> > I misspoke - now that I look at it closer and play with jquery.accordian, I
> > don't want it to function like an accordion menu, since I want each grouping
> > to be toggled independent of each other -- they could all be open, or all
> > closed.
> > sorry for the confusion...
> >
> >
> > rolfsf wrote:
> > >
> > > I'm trying to figure out how to build a table that allows the user to
> > > toggle groups of rows, much like the accordion menus made with Jörn's
> > > accordion plugin, while keeping reasonably semantically correct markup in
> > > the table.
> > >
> > > My best guess on the markup is posted here:
> > > http://www.monkeypuzzle.net/testfiles/jquery/Accordion_table/
> > >
> > > briefly, it's something like:
> > >
> > > <table>
> > > <thead>
> > > <tr>
> > > <th>heading</>
> > > <th>heading</>
> > > </tr>
> > > </thead>
> > >
> > > <tbody>
> > > <tr class="accordion">
> > > <th colspan="2" class="collapse_group">Grouping name 1</th>
> > > </tr>
> > > <tr>
> > > <td>data</>
> > > <td>data</>
> > > </tr>
> > > <tr>
> > > <td>data</>
> > > <td>data</>
> > > </tr>
> > > </tbody>
> > >
> > > <tbody>
> > > <tr class="accordion">
> > > <th colspan="2" class="collapse_group">Grouping name 1</th>
> > > </tr>
> > > <tr>
> > > <td>data</>
> > > <td>data</>
> > > </tr>
> > > <tr>
> > > <td>data</>
> > > <td>data</>
> > > </tr>
> > > </tbody>
> > >
> > > ...etc
> > > </table>
> > >
> > > I want to be able to click on the "Grouping" <th> and collapse/expand the
> > > rest of the rows in that <tbody>, but leaving the <tr class="accordion">
> > > visible.
> > >
> > > Can someone get me started? :-)
> > >
> > > thanks!
> > >
> > >
> >
> > --
> > View this message in context:
> > http://www.nabble.com/accordion-table%2C-instead-of-an-accordion-list-menu--tf3264032.html#a9073436
> > Sent from the JQuery mailing list archive at Nabble.com.
> >
> >
> > _______________________________________________
> > jQuery mailing list
> > [email protected]
> > http://jquery.com/discuss/
> >
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
