How to make expandable text on clicking more button in views?

Question

I have created a views with trimmed fields and displaying more button to show the full content.I want to do something like collapse text ie.,when i click on more button it has to expand and show the full text.Any help will be much appreciated on how to do this.Thanks in advance.

Answer 1

This will require some custom theming to accomplish:

1. In your view, don't trim the field, just show it all for now. This will mean if a user has JavaScript disabled they will still have access the all the content.
2. In order to enhance the interface as you've described for users with JavaScript enabled, you should take a look at this tutorial.
3. You will have to tweak things to get it working with your theme. If you're unsure about adding Javascript to a theme, check this out.

Answer 2

You could use CSS :active.

Something like this:

Styles:

.more-link p {display: none;}
.more-link:active p {display: block;}

HTML:

<a href="#" class="more-link">
<p>Hidden text</p>
</a>

It is possible to use CSS transition to show text block smoothly.

Answer 3

There's a contributed module that does this, Readmore. The other answers explain how to set this up yourself, but that's no longer necessary.

I've adding feature request to have this functionality added to Drupal Core. See Allow for expandable text with "Read more/less" links in Default field formatter for details. Patches welcome!