Tags:
create new tag
, view all tags
See Support: IsitPossibletoHaveTwistyTableRows.

Most of the tests below work--at least in konqueror version 3.4.2. with javascript turned on globally. If you don't have javascript enabled, you will have to enable it and then restart konqueror to make it work. (It should work in any Javascript enabled browser.)

To demonstrate, click on the text below either of the headings--that text will disappear. To make it reappear, click on the heading above the text that disappeared.

This demo works by alternating the style.display between "inline" and "none". Some other tests, alternating between "block" and "none" didn't seem to work (on the first try) so I deleted them to make the page less cluttered.

To make this example prettier, you could add say a + in square brackets and make the onclick property apply to that. (I've done that in some offline tests.)

At the bottom of this page, I have some notes to myself (commented with HTML comment markup) to jog my memory as to where I have my notes and test files (from some time ago).

test1

These are a few short paragraphs for test.

With Javascript enabled, click here to hide this text.

Afterwards, click on the heading above to view this text again.

These are a few short paragraphs for test.

test2

With Javascript enabled, click here to hide this text.

Afterwards, click on the heading above to view this text again.

A bulleted list--it could just as well be a table or part of a table:

  1. The "opposite" of visibility="hidden" is visibility="visible"
  2. The opposite of display="none" is display="inline" or display="block"--I don't know the difference, so far they seem to work the same.

Trying to do the same thing for a table with TWiki markup

test3

line 1 a short table using TWiki markup
line 2 a fixed line
line 3 the foldable area
line 4 click test3 to redisplay
line 5 end of the foldable area
line 6 a short table using TWiki markup
line 7 a short table using TWiki markup
line 8 a short table using TWiki markup

Hmm, this (the above) works somewhat, but there is a fairly obvious problem--TWiki doesn't consider it one contiguous/continuous table but instead three (separate) tables. It might work to display the entire table using HTML markup instead of TWiki markup--I'm not sure I want to bother. Let's see:

test4

line 1 a short table using HTML
line 2 a fixed line
line 3 the foldable area
line 4 click test4 to redisplay
line 5 end of the foldable area
line 6 a short table using HTML
line 7 a short table using HTML
line 8 a short table using HTML

test5

line 1 a short table using HTML
line 2 a fixed line
line 3 the foldable area
line 4 click test4 to redisplay
line 5 end of the foldable area
line 6 a short table using HTML
line 7 a short table using HTML
line 8 a short table using HTML

20140201 update: Ok, I got the above to work, but it is very kludgy, imho. I had to divide the table into three separate tables ("Raw View" to see the HTML markup) in order to make it work the same as the table with the TWiki markup (Test3). Trying to clarify what I had to do, I found this only works if the span encompasses an entire table. A span encompassing a subset of rows does not seem to be recognized as a span.

20140202 update: Oh, and in case it's not clear (even to me, sometime in the future), I can presumably collapse each row of the table individually by making each row a separate table and span. I'd have to think about a way to re-expand those separate rows, but, that might be easy in view of the potential disadvantage cited below--if I have a (super-)span encompassing the entire set of tables / rows, and an onclick to expand that span (change the style to inline), I think it will re-display all the rows of the table.

20140202 update: Of course, all this stuff takes a lot of HTML markup, and it would be nicer if there were someway to automate it (or incorporate it in the TWiki / Foswiki markup language).

20140202 update: And, oh, the HTML table(s) look better (I mean more like one contiguous table) than the TWiki formatted table. So maybe that is a clue--I mean, maybe that will always be true, or maybe I can add a line to each of the tables to format each of the three to the same width (or any other style aspects that might differ between the three).

20140202 update: OTOH, I'm more likely to want to collapse an entire table below a heading, rather than collapse some part (i.e., rows) of the table (I think--unless I sort of have an outline structured table where some rows are subsidiary to some other rows). OTT(hird)H, the poster to the page Support: IsitPossibletoHaveTwistyTableRows wanted to collapse individual rows.

20140202 update: Potential ToDo: Experiment with making more of the page collapsible in a hierarchical fashion, with collapsible regions within other collapsible regions. My first guess is that it should be possible, just by creating spans within spans. I made one attempt at this (test5) that did not work. I guess an alternate (for a table) is to have multiple onclick statements in the heading to individually expand (switch to "inline" style) for each row of the table.

20140202 update: Potential problems:

  • The areas to click may be a little difficult to arrange, as I'm guessing some places to click to expand other subsidiary areas will be hidden.
  • It may be that when I expand an area (e.g., heading) high in the hierarchy, it will expand all the subsidiary (and possibly previously collapsed) headings below it--and then I'd have to go back and recollapse those subsidiary headings if I wanted them collapsed.

20140203 update: PeterThoeny added a note to the Support: IsitPossibletoHaveTwistyTableRows page which refers to an example table (the plugin info table of NotifyAuthorsPlugin) which uses a table divided into divisions to make part of the table collapsible using TWISTY. Actually, it again looks like it is three separate tables, with statements in each ("") to set the same width for all three tables. In any event, my main point here is, that if I want to dig into this again, I may want to start with a google search on [HTML "nested divs" collapsible] or similar.

Resources

BTW, the two books listed below gave me (most of) the information I needed to do the test described here as well as some other tests I did off line quite some time ago.

  • Teach Yourself Javascript in 24 Hours, Michael Moncur, 4th Edition (Covers JavaScript 1.5 and Ajax), Sams, 2006, ISBN 0-672-32879-8--of the two books I thought this was the better book (maybe more traditional?). Remember the my first goal was writing some JavaScript for kate (timestamps), and not everything works in Kate the way it does in a browser. Two examples: document.write does not work in kate, I had to use document.insertText or .insertLine, and, I don't think (but I could be wrong) that there is a DOM for the text in a Kate file.

  • Javascript, Eric Pascarello, 2nd Edition, Wiley (Visual: Read Less, Learn More), 2004, ISBN 0-7645-7497-3--I'm not sure I like the Read Less, Learn More presentation (I like the idea ;-), but I did find some examples in the book that were useful--I'll have to find them again. Sent a question to wiley.custhelp.com about the blank (no text) blue areas on various pages (like page 54 at arrows 1 and 3).

The example that got me started was on page 58 of the 2nd book and included this key line (i.e., the one that gave me the necessary clue):

<p onclick="alert('apple')">test</p>

Edit | Attach | Watch | Print version | History: r9 < r8 < r7 < r6 < r5 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r9 - 2014-02-03 - RandyKramer
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by PerlCopyright 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding WikiLearn? WebBottomBar">Send feedback
See TWiki's New Look