Using "Read More" (P Pro) with Switcher

I am using @willwood’s excellent Switcher stack (it’s my favorite accordion/tab stack) as a way to incorporate a lot of data into a page without the page being overwhelmingly long. I would like to use the “read more” feature of Paragraph Pro inside of Switcher - but it’s not working.

If you click on the Radiologist Bio’s tab on this DRAFT page, you’ll see that I have to all over two dozen CVs to add. This is a perfect place to use the Read More feature. I currently only have it added to Stetson Bickley’s CV, but it isn’t working. However, if I pull the Dr. Bickley’s C V (Paragraph Pro) out of Switcher, it works perfectly. Any suggestions?

I’m pretty sure this is because Switcher will need it’s contents to load before working out the depth of the content, so it knows how big to build itself, or summit like that. So, if the content that gets loaded then changes it’s depth, Switcher is the wrong size.

I may have got how things load and what is taking it’s size from where mixed up a bit there, but I’m pretty sure the that that is the core of the problem.

I think the solution is lots of clever css that makes the PP stacks load all the content first, then reloads itself (or summit) with the read-more thingie working.

Or, to put it another way, it can’t be done ;-)

Scribe has read-more child stack, never know that might work around the problem somehow.

Everything I’ve written above might be entirely wrong.

1 Like

The readmore feature requires that the text is visible on the page at load time (as with many such stacks). If it is hidden then the calculations can’t be carried out and the JS will not work.

In the normal world, away from RW/Stacks, we would just trigger a recalc event on the read more when its parent tab became visible.

Do I remember that switcher has the capability to execute code on a callback when a tab opens? Foundation tabs do and we have got PPro working with those in the past so it may be possible.

So… definitely maybe possible.

So not entirely wrong then!

Wow - yes, it does have a place for Custom Callback code!

But, I’ve taken the simple path forward and am putting the extra stuff into Lazy-loading Limelights instead. The easy solution looks elegant, too, so I’m a happy camper.

1 Like