How to Add a Collapsible Text Area in WordPress (3 Easy Ways)

A collapsible text area hides part of your content behind a clickable title or a “show more” link. Readers open only what they need, so long posts and pages look shorter and are easier to scan.

It works well for FAQs, product details, policies, transcripts, spoilers and step-by-step extras. This guide shows you three ways to add one in the WordPress block editor, with live examples you can click.

Quick answer

  • Several collapsible sections (easiest): install the free Ultimate Blocks plugin, add the Accordions (UB) block, and type a title and content for each panel. Turn on FAQ schema if the panels are questions and answers.
  • One “show more” text area: use the Ultimate Blocks Expand block to show a preview and hide the rest.
  • No plugin: use the core Details block or the core Accordion block. Both are built into WordPress, but neither adds FAQ schema.

Try it: live collapsible text examples

Example 1: an accordion. This is the Ultimate Blocks Accordions (UB) block. Click a title to open or close each panel.

Shipping details

Return policy

Size guide

Example 2: a show more text area. This is the Ultimate Blocks Expand block. Click Show more to open it and Show less to close it.

Product description: This cotton hoodie is soft, warm and made for everyday wear. It has a kangaroo pocket and a lined hood.

Both blocks can hold any block inside the hidden part: paragraphs, lists, images, buttons or videos.

Which collapsible text method should you use?

MethodBest forFAQ schemaPlugin needed
Accordions (UB) blockFAQs and several titled sectionsYes, one toggleYes (free)
Expand blockOne long text with a preview and a show more linkNoYes (free)
Core Details blockA single click-to-reveal sectionNoNo
Core Accordion blockSimple accordions without a pluginNoNo
Checked in the WordPress 7.1 block editor in November 2026.

Method 1: Add collapsible sections with the Accordions (UB) block (easiest)

Best for: FAQ sections, product details, policies and documentation split into titled panels.

Ultimate Blocks is a free block plugin active on 50,000+ WordPress sites and rated 4.9 out of 5 on WordPress.org. Its Accordions block (also called the Content Toggle block) adds collapsible panels and can output FAQ schema with one toggle.

Step 1: Install Ultimate Blocks

  1. In your dashboard, go to Plugins > Add New Plugin.
  2. Search for Ultimate Blocks, then click Install Now and Activate.

Step 2: Add the Accordions (UB) block

  1. Open the post or page in the block editor.
  2. Click the + (Block Inserter) button and search for Accordions or content toggle. You can also type /content toggle in a new line and press Enter.
  3. Click the Accordions (UB) block to add it.

Step 3: Add your titles and content

  • Click the first panel title and type it, for example Shipping details.
  • Click inside the content area below it and add your text or any other block with the + button.
  • Hover over a panel and use the + icons to insert a new panel above or below. Use the x icon to delete one, and the move arrows in the toolbar to reorder them.

Step 4: Choose how the panels open

Select a panel and open the Settings tab in the right sidebar. Under Toggle State you can turn on:

  • Collapsed: all panels start closed when the page loads.
  • Default Open: pick one panel that starts open (works when Collapsed is on).
  • Show only one panel at a time: opening one panel closes the others.
  • Collapsed on mobile: panels start closed on phones only.

Step 5: Turn on FAQ schema and style it (optional)

  • FAQ Schema: switch on Enable FAQ Schema if your panels are questions and answers. Each title becomes a question and its content the answer. See our guide to adding FAQ schema in WordPress.
  • Panel Title: choose the heading tag (H1 to H6 or P) so the titles fit your page outline.
  • Styles tab: set the title bar color, title color, the open and close icon (left or right), the panel border and its corner radius.

Click Save or Update, and your collapsible sections are live. The Accordions block documentation lists every setting.


Method 2: Add a show more text area with the Expand block

Best for: one long block of text, such as a product description, author bio or transcript, where readers should see a preview first.

The Expand block is part of the same free plugin. It shows the first part of your content and hides the rest behind a “show more” link.

  1. With Ultimate Blocks active, click the + button and search for Expand, or type /expand and press Enter.
  2. Add your preview in the first part. It is always visible and ends with the show more link.
  3. Add the hidden content in the second part. It ends with the show less link. In the editor, this part shows only while the Expand block or something inside it is selected.
  4. Click the show more and show less text to write your own link text, such as “Read the full description”.
  5. Optional: in the sidebar, turn on Allow scrolling under Scroll Settings so readers jump back to the top of the block when they close it.

For more ideas, see how to add read more in WordPress and how to show and hide text in WordPress.


Method 3: Use the core Details or Accordion block (no plugin)

Best for: simple collapsible text when you do not want to add a plugin.

Option A: The Details block

The Details block shows a summary line with an arrow. Readers click it to reveal the hidden content.

  1. Click the + button and search for Details, or type /details and press Enter.
  2. Replace the “Write summary” text with your title.
  3. Add the hidden content inside the block.
  4. Optional: turn on Open by default in the block settings. To make several Details blocks close each other, give them the same Name attribute under Advanced.

Option B: The Accordion block

WordPress also has a core Accordion block. Each item has an Accordion Heading (the clickable title) and an Accordion Panel (the content).

  1. Click the + button and search for Accordion, or type /accordion and press Enter.
  2. Type a heading, then add content in the panel below it.
  3. Click Add item in the toolbar to add more sections.
  4. In the sidebar, use Auto-close to close other items when one opens, and Show icon to show an icon on the left or right.

Limits of the core blocks: neither adds FAQ schema, neither has a “start collapsed on mobile only” option, and the Details block does not show a preview of the hidden text. If those matter, use Method 1 or Method 2. For a deeper comparison, read our guide on how to add an accordion in WordPress.

Tips for collapsible text that helps readers and SEO

  • Keep the main answer visible. Hide extra detail, not the one thing most readers came for.
  • Write clear titles. “Return policy” beats “Click here”. Readers decide what to open from the title alone.
  • Use real headings for titles. Set panel titles to H3 under an H2 so your page outline stays logical.
  • Do not collapse the whole page. Mix collapsible sections with normal text, images and a table of contents.
  • Make it look good. Our accordion design guide covers spacing, icons and colors, and the best WordPress accordion plugins list compares other options.

Need readers to find answers fast in a long FAQ? Ultimate Blocks Pro adds a search box with highlighted matches to the Accordions block, plus a fade effect and button style for the Expand block. Pro also includes animation, visibility control and saved styles. Plans start at $39/year for one site, with a 30-day money-back guarantee.

Supercharge Your WordPress Block Editor!

Frequently asked questions

How do I make collapsible text in WordPress without a plugin?

Use the core Details block for a single click-to-reveal section, or the core Accordion block for several sections. Both are built into the WordPress block editor.

What is the difference between an accordion and an expand block?

An accordion has several titled panels that open and close separately, which suits FAQs. An expand block shows a preview of one piece of content and hides the rest behind a show more link.

Can Google read text inside a collapsed section?

Yes. The hidden text is still in the page HTML and is only collapsed for readers, so search engines can read it.

How do I keep all sections closed when the page loads?

In the Accordions (UB) block, turn on Collapsed under Toggle State. In the core Details block, leave Open by default switched off.

Can I add FAQ schema to collapsible sections?

Yes, with the free Accordions (UB) block. Switch on Enable FAQ Schema and each panel title becomes a question with its content as the answer. The core Details and Accordion blocks do not add FAQ schema.

Are the Ultimate Blocks Accordions and Expand blocks free?

Yes. Both are part of the free Ultimate Blocks plugin. Accordion search, the Expand fade effect and the Expand button style need Ultimate Blocks Pro.

Final thoughts

For FAQs and several titled sections, the free Accordions (UB) block is the easiest choice and adds FAQ schema in one click. For a single long text, the Expand block gives you a clean show more link, and the core blocks cover simple cases without a plugin.

Your next step: install Ultimate Blocks and turn your longest FAQ or product section into an accordion.

Found this helpful? See more of us on Google.

Add UltimateBlocks.com as a preferred source and our WordPress guides will show up more often in your Top Stories, AI Overviews and AI Mode.

Add us on Google

Free, one tap, remove anytime

16 responses to “How to Add a Collapsible Text Area in WordPress (3 Easy Ways)”

  1. James6M Avatar
    James6M

    Is it possible to have an “Expand All” button, or equivalent, on a page with Content Toggle blocks?

    1. Istiak Rayhan Avatar
      Istiak Rayhan

      Do you want to expand all of the toggle at a time?

      By default, all of the toggles remain opened.

  2. Kevin Avatar
    Kevin

    How to change the color of “show more” and “show less”. Its always green and i want to have it in an other color

  3. Cristiano Avatar
    Cristiano

    can I insert a block inside other?

    1. Imtiaz Rayhan Avatar
      Imtiaz Rayhan

      Yes, you can.

  4. 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.

  5. 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.

  6. Devender Gupta Avatar
    Devender Gupta

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

  7. 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.

  8. 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.

  9. 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 *