'read more' option for text box


#1

is there a way you can trunk a block of text and add a ‘read more’ option that then extends the box?
thanks


Buttons to display blocks
#2

Hey,

You can do that using ‘toggle visibility’ feature in Interactions menu. Basically, create the three paragraph text brics. First one - summary, second one - read more link, third one - detailed text.

Then, assign the IDs to ‘read more’ and ‘detailed text’ brics, then disable the visibility in the sidebar for detailed text bric, and link ‘read more’ button to ‘toggle visibility’ of two IDs (read more bric itself and detailed text.) This way, when you click on read more link, it will hid the read more link and show the detailed text.

I made a video about similar feature, which you can check out here:

Cheers,
Eldar


#3

Using Toggle Visability with a custom class to differentiate the text does this…
http://www.apswoodwork.uk/testimonials.html
… click ‘Magazine article’


#4

@ apswoodwork Great!
How did you manage that above context close when clicking another row?
That´s really like an accordeon - fantastic.


#5

Thanks.
I used Accordion on the same page with my customers’ comments.
The ‘read on’ and ‘hide’ buttons both target both ID elements, so each changes the state of itself as well as the target.
Hope that helps,
Andy


#6

Thanks all! I made it work- appreciate the help


#7

Thanks for your reply.
I stil do not really understand how you managed this.
The “toggle visibility” I used here:
http://bluecruise.org/cabin-charter-cruises/gulf-of-gokova-premium-gulet-boutiquestyle.html
But I can´t manage it to automatic closing when clicking another button.

Help would be much appreciated.


#8

May I ask how you managed this?


#9

Hello Eldar,
Do you have any idea how apswoodwork achived to closing effect.
I can´t understand his description.

Cheers


#10

Hello,

Check this thread, where he explains how he did it.

Cheers,
Eldar


#11

Thnks Eldar, I saw this but above he mentioned toggle visibility with a custom class…
… I give up for the moment. :relieved:


#12

Below is an animated .gif which demonstrates one way to get ‘read more’ toggle visibility to work, and I’ve also attached the simple project, more.bloc, that I used.

I am using Blocs 2.5.0 b7, and found bugs while getting this to work. In fact, a bug occurs at the end of my animated .gif, which turns out to to lead to another nice way of doing it.

Note: to see enough detail, you need to click on the animated .gif so it will expand.

Here are the steps you’ll see in the animated .gif

  1. In preview mode, I demonstrate that clicking the ‘more’ link toggles visibility of the detail paragraph and the ‘more’ link itself.
  2. I then demonstrate that clicking the ‘less’ link toggles visibility of the detail paragraph and the ‘more’ link back to the initial state
  3. I then switch to edit mode and click the ‘more’ link and show whats entered in the sidebar for its ID, Class, and Interaction Type. (The ‘link’ class simply makes the link text underlined and blue)
  4. I repeat the same thing with the detail paragraph and ‘less’ link
  5. Finally, I switch back to preview mode and test again, but this time a bug occurs and the ‘more’ link disappears. So I switch to edit mode and back to preview mode, and now the ‘more’ link reappears, and, strangely, the ‘less’ link is now right next to it – which may be an even better way of doing it, but since I didn’t make that change, it seems to me to be a bug.

more.bloc (735.6 KB)