Vertical Expand/collapse

Hi,

thanks for your question.

Unfortunately, I don’t have a readily usable solution to this, but you could achieve this with just a little bit of extra work:
Basically, you would need to create two separate pages, one that shows just the small version with a few rows (you can achieve this by using the hide_rows Shortcode parameter that is explained in the TablePress Documentation at https://tablepress.org/documentation/ ), and one that shows the full table (i.e. without any extra Shortcode parameters). Then, the page with the small table would just need to have a link to the page that has the full table.

Regards,
Tobias

thx for your response. I really do need to keep the user on the home page though.
Wordpress does have the ‘read more’ tag which I am already using immediately below the (partial/upper) table–when the user clicks it, the second lower half of the table appears immediately below. There is a small vertical gap between the two tables that I was hoping to prevent.

Thx

Hi,

the “Read more” tag can only work outside or “between” other HTML tags. It can not work inside a table, unfortunately (for technical reasons, i.e. how HTML works) ??

So, your current solution with two tables might then be the best approach. And it should be possible to remove that vertical gap with some extra CSS code. If you post a link to the page with the table, I’ll gladly try to find that code!

Regards,
Tobias

here you go: https://www.slimpanion.com/.

Actually it was an in “insert more” [toggle] tag I used. I did try it earlier inside a <td> block that spanned the entire column and that worked but I wasn’t able to get it so the outer side borders perfectly aligned with the rest of the upper table–I think that could probably be done in CSS but I’m not too skilled in that area. So I did what could in CSSS and found it easier to do it as 2 tables. Thx!

Hi,

yes, that’s what I mean. Using such a tag in a table cell is not really possible, as the HTML then becomes invalid.

You could now reduce the padding above the second table by removing the CSS

.toggle-content {
  padding-top: 15px;
}

but that has nothing really to do with TablePress.

Regards,
Tobias

Thx. I had previously altered the CSS (below) and that seemed to minimize the padding–but the space with the “Click for the rest…”
remains after the expansion–which is ok I guess but it would be nice if it could disappear. As you can see, I used a rather broad-brush approach and zeroed out everything in the CSS. I needed to do something like this because there was a border within a border that I needed to remove to get a look consistent with the upper grid. I can’t really say I know what I did but it seemed to work.

I will try your plugin. Thx for all your help.

.toggle {background:#F6F6F6;margin-bottom: 0px; border: 0px solid #E1E1E1;border-bottom: 0px solid #979797;padding: 0px 0px;border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;position: relative;box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.0);-moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.0);-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.0); }

bws92082

Hi,

sure, you are very welcome!
Great to hear that you found that CSS code.

Best wishes,
Tobias