https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • s
    I want to have table rows accordion for more information; I have a right pointing chevron icon at the right of each table row; clicking that should make the chevron icon change to a downward pointing one in that row while a new table row is appended below; clicking the chevron again should reverse that; I don't think I can wrap two rows in something for return form the server that won't change the table appearance; thoughts? (and I probably mangled this question).
  • s
    (also, if there is a better place for this question here let me know)
  • t
    how much data do you get back when you click a row?
  • s
    A small amount... the row shows 3 fields of data; the accordion will have a delete and an edit button.
  • s
    Maybe I will add more data about the row item in the accordion later.
  • s
    I'll learn how to upload GIF's here at some point to make my questions more clear.
  • t
    part of me thinks that you should load the data on the initial page request and use basic js to show/hide the addl data + toggle a class for the chevron
  • s
    I thought about that.
  • s
    It seems like the fact that the two returned elements are siblings is the problem, and in the case of a table you can't really put them in a parent element without doing weird things to the appearance of the table.
  • s
    The other option could be to do away with using a table altogether, and use divs and all that... but tables are much easier for me.
  • t
    do the rows have unique ids that you can reference between the client and the server
  • t
    (theyd have to, right)
  • s
    They don't alas... they would be from the same db document.
  • s
    The appended row is just more about the same thing.
  • t
    oh i see. youve got a nested document situation
  • s
    Well, not on the server... the idea is to see a table of things... if you want to know more about the thing (or edit or delete it) you click the drop-down icon (a chevron currently) and an accordion opens up.
  • t
    how to edit or delete something that you dont know the id for?
  • s
    Oh, sorry! Yes, it does have an id (I misunderstood your earlier question).
  • s
    Definitely.
  • s
    I map over a data structure to get all the rows and send that to the front-end; clicking the chevron currently makes a call to the server for the item and more information is returned from the server about that item.
  • s
    (mistyped that and just corrected it)
  • s
    So, I thought: no problem, I'll just return the original row and the next row... but then I have to, it seems, wrap it in a containing element to make it a single thing.
  • s
    And that containing element messed up the table layout.
  • m
    If you use hyperscript you can use positional expressions to generalize this w/o ids:
    Copy code
    html
<tr>
  <td> <button _="on click toggle .expanded on the next .accordion">Toggle</button>
   </td>
   ...
<tr>
<tr class="accordion">
  <td> ... </td>
   ...
</tr>
    where .accordion is hidden by default and .accordion .expanded is shown
  • s
    Oh nice!
  • m
    maybe outside the lines of what you are looking for, but the relative positional expressions in hyperscript are for this sort of thing
  • s
    That also allows a lot of other abilities I'll need.
  • s
    I feel like I am talking to a celebrity right now, btw... and I am.
  • s
    HTMX has made my life wonderful.
  • m
    there is "next" which will scan forward, "previous" which will scan backwards, and "closest" which will scan up the parent hierarncy of the element
1...872873874...1146Latest