How to collapse and expand text at will within content in Wordpress

Has it ever happened to you that you have a very long text that you would like to only be displayed when you click on it? It happens to me constantly, both in blog posts and in the description of the products in some online stores.

And I'm not referring to the typical "Read more" or "Keep reading" link made with the "More" block (or the icon in the classic editor) or "Page break".

And I say that they are not valid because the "More" block has no effect within an entry or product and, although the page break does work in some cases, it does not work in WooCommerce products, for example.

In addition, the page break block generates an SEO problem, by creating new additional URLs, and requiring a page change, something that is not feasible in many situations, and never in an Ecommerce.

Another possibility would be to install a collection of blocks that includes the typical accordion effect, for example, but it will not work for you in all situations, and currently it is useless in the product editor, for example, since it still uses the classic editor.

So, looking for a solution that would serve me for all situations, I found the remedy that cures everything: Collapse-O-Matic.

This plugin is a marvel of WordPress science. Once installed you have a settings screen, totally recommended to visit, although normally you do not need to change anything for it to work.

And how it works? you will ask yourself.

Well, simple, to make a text contract and expand you just have to wrap it with a shortcode, like this:

[expand]Texto a mostrar contraído hasta que se haga clic para expandirlo[/expand]

And it is pure magic.

The best thing is that you can start and end the expandable text spanning several blocks.

When I save the changes, instead of the shortcode a little arrow appears in which, when I click, the text inside the shortcodes will be displayed.

And this is its most basic use, because you can customize the shortcodes to, for example, add a visible text before or after expanding or collapsing.

It would be like this:

[expand title="Mostrar más" swaptitle="Mostrar menos"]Texto a mostrar contraído hasta que se haga clic para expandirlo[/expand]

I highly recommend you go through the documentation page to see what you can do with a simple shortcode and a few modifiers, it is surprising.

By default the text appears collapsed, but it can be displayed expanded, and many more possibilities.

It is also interesting to know the theme settings page, as it has a lot of tags that you can use to modify the behavior of the plugin.

And the best thing is that it works with the block editor, the classic one, and in all types of content, also in the WooCommerce product description.

Date update on 2021-02-16. Date published on 2021-02-16. Category: Computer class Author: Oscar olg Fuente: ayudawp