Skip Navigation

[Resolved] Read more dropdown

This support ticket is created 4 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 4 years, 11 months ago.

Assisted by: Christian Cox.

Author
Posts
#1405605
trying-to-achieve.PNG
example.PNG

Hi I have a View that I have created which shows items in a Bootstrap grid.

What I am trying to achieve is a list of Employee Profiles with a picture, Job title and job description. The issue is that in some cases the Job Descriptions provided are only one paragraph and in other cases, they are much longer. This is creating a very uneven grid where some items are dropping down to cover half the page.

Even if the columns were set to equal height this would look weird because the columns with less content would have excessively large amounts of white space.

The stakeholders don't want to have a read more link which links off to another page, they want to keep it all on the same page. So I was wondering if there was some way of setting a word count limit and then after this set amount of words an expandable read more link appears that can be toggled open to show the rest of the content

Thanks!

#1407151

Hello, there's nothing exactly like this built-in to Toolset. I think you would be able to accomplish this with custom code by using CSS to set a fixed height on each grid item and use text-overflow to crop the text inside the fixed height. Then you could use JavaScript to toggle that fixed height class when the "Read more" link is clicked.

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/