Has it ever happened to you that you have a very long text that you would like to be displayed only when you click on it? It happens to me all the time, both in blog posts and in product descriptions in some online stores. And I’m not talking about the usual “Read more” or “Continue reading” link that is 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 a post or product and, although the page break block does work in some cases, it does not work in WooCommerce products. In addition, the page break block generates a SEO problem, by creating new additional URLs, and requiring to change page, 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 usual toggle block, but it will not work in all situations, and currently it is useless in the product editor, because it still uses the classic editor.
The solution
So, looking for a solution that would work for all situations, I found the remedy that cures everything: Collapse-O-Matic.
This plugin is one of the greatest of WordPress science. Once installed you have a settings screen, totally recommended to visit, although normally you don’t need to change anything to make it work.
And how does it work? you may ask.
Well simple, to make a text can be contracted and expanded you just have to wrap it with a shortcode, like this:
[expand]Text to show when you expand it[/expand]Code language: CSS (css)And it is pure magic.
The best thing is that you can start and end the expandable text including multiple blocks.
When you save the changes, a small arrow will appear instead of the shortcode, and when you click on it, 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 contracting.
Like this:
[expand title="Show more" swaptitle="Show less"]Text to show or hide[/expand]
Code language: CSS (css)And it would look like this….
I highly recommend you to go through the documentation page to check everything you can do with a simple shortcode and a few modifiers, it’s amazing.
By default the text appears contracted, but it can be displayed expanded, and many more possibilities.
It is also interesting to know the settings page of the theme, because 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.
Read this post in Spanish: Cómo contraer y expandir texto a voluntad dentro del contenido
