How To Add A Collapsible/Expandable Text Area In WordPress

A collapsible/expandable text area saves space and keeps visitors engaged to the post/page. This way, the visitors can decide whether they want to view the content or not.

Using a collapsible/expandable text area, you’ll be able to show a lot of content in a single post/page without making the post lengthy.

When it comes to adding collapsible/expandable texts in WordPress, you have two options. Either you need to have coding knowledge or you need to use a plugin.

Using a plugin is comparatively easy. Here I’ll show you how to add a collapsible text area in WordPress using a plugin.

Like everything, you can do it using a plugin. Here we will be using the Ultimate Blocks plugin that comes with both Content Toggle (Accordion) and Expand Blocks. Using these blocks, you can add your content in accordion or expand more/less ways.

Content Toggle Block (Accordion)
Expand Block (Show More/Less)

Step 1: Install the Ultimate Blocks Plugin

First, go to your WordPress Dashboard and navigate to Plugins > Add New Plugin. Then search for ‘Ultimate Blocks’ and install & activate the plugin.

Step 2: Add the Content Toggle Block

Now go to your WordPress post editor and click on the plus (+) sign to add a new block. Then search for ‘Content Toggle’ and click on it to insert the block.

Step 3: Add Content

Then add the title of your collapsible/expandable text in the ‘Panel Title’ and add the main content under it.

You can add more collapsible text area by clicking on ‘+’ sign under the box.

Once you’ve added all the collapsible text area, you can configure things like initial state, FAQ schema, icon, and more.

Step 4: Using the Expand Block

Now let’s see the ‘Expand’ block. The ‘Expand’ block is mainly useful for read more and read less dropdown text.

Upon inserting the ‘Expand’ block, you need to add the content that you want to show before the ‘show more’ text and add the hidden content between ‘show more’ and ‘show less’ text.

So this is how you can add collapsible/expandable content in your WordPress posts/pages.


Ultimate Blocks

Conclusion

I hope both processes are clear to you. You can use any of the plugins to add a collapsible/expandable text area in your WordPress post/page.

If you have any queries feel free to ask, I will be happy to answer those. If you liked the post, please share it on your favorite social media site.

Also Read:

13 responses to “How To Add A Collapsible/Expandable Text Area In WordPress”

  1. Cristiano Avatar
    Cristiano

    can I insert a block inside other?

    1. Imtiaz Rayhan Avatar
      Imtiaz Rayhan

      Yes, you can.

  2. Giulia Flores Avatar
    Giulia Flores

    With the expand block, is it possible to use an image as the “shown text”?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Yes, you can use image in the hidden part.

  3. Steve Troxel Avatar
    Steve Troxel

    Is there a limit to how many Expand block on a single page? I need a way to include about 300 and am wondering if this will work before I start down this path.

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      There’s no limit. But adding 300 blocks might slow down the page.

  4. Devender Gupta Avatar
    Devender Gupta

    Thanks for your plugin, otherwise I was doing this manually by code.

  5. Krisztina Avatar
    Krisztina

    Can you add an anchor to a piece of copy in a different extendable block? (E.g. you have 2 blocks and you want to jump from inside block one to inside block 2, expanding that section.) Is it possible?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Possible if the section is already expanded. It won’t work with a collapsed section.

  6. Luqman Essam Avatar
    Luqman Essam

    Thanks,
    Let me know,
    This is SEO friendly?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Yes, Google bot can see the hidden content. So it won’t affect SEO.

  7. alaia Avatar
    alaia

    How can you use the shortcode to only show on mobile?

Leave a Reply

Your email address will not be published. Required fields are marked *

Introducing New Table Block Plugin - Tableberg

X
Need help?