Want to give users a more engaging experience on your website? Learn how to show and hide text in WordPress.
Long walls of text can overwhelm visitors, leading to higher bounce rates and lower engagement. You need a way to simplify the experience without cutting valuable information, whether you’re dealing with lengthy content or extra details.
That’s where content toggling can help. Here, we’ll show you how to add show/hide text in WordPress.
With the Unfold and Accordion widgets from The Plus Addons for Elementor, you can boost readability and keep users focused where you want them. In this step-by-step guide, we’ll help you achieve just that.
Let’s get started!
Why Should You Consider Showing and Hiding Text on WordPress Websites?
Too much visible content at once can be overwhelming, especially on smaller screens.
By giving users the option to reveal or collapse text, you and your website benefit in the following ways:
- Better Readability:
Break up long text so visitors can focus on specific, strategic content areas.
- Lower Bounce Rates:
Expandable text helps website visitors avoid endless scrolling and keeps them engaged.
- Increased Visiting Time:
Let visitors explore content at their own pace. Expandable sections encourage interaction, which naturally leads to longer browsing sessions.
- Mobile-Friendly UX:
Content control lets you display just enough text on smaller screens, without overwhelming users.
- Improved SEO:
Better structure and engagement can ultimately help to improve your search rankings on search engines.
Showing and hiding text are great ways to provide more information, without having to compromise on design or performance.
Adding in expand block options, or a “Read More” link can enhance the experience for users by a lot.
Now that we know why it’s important, let’s see how to implement it in simple steps, without using any custom code.
How to Show and Hide Text in WordPress (No Code Methods)
Using shortcodes or WordPress inbuilt methods might seem daunting for changing text visibility on your website.
Using specialized show/hide widgets from The Plus Addons for Elementor is a beginner friendly way to work with long-form content, FAQs and more.
Method 1: Show and Hide Text Using Unfold Widget
Best for Long Form Content
The Unfold & Expand Button for Elementor is designed by The Plus Addons with the intention to keep things minimal, while still offering full context when the user wants it.
The widget lets you show just a short snippet of content, with a “Read More” or “Show More” link to reveal the rest.
The widget offers you multiple ways to add content, two types of expand buttons, and flexible button placement options.
To learn how to use it for your long form content, follow the steps outlined below.
Step 1: Install The Plus Addons for Elementor
Start by ensuring that both The Plus Addons for Elementor plugin free and pro is installed, and that Elementor is also active on your site.
Navigate to The Plus Addons > Widgets. Search for “Unfold” in the search bar, and look for the right widget in the results.
Turn the toggle on to enable the widget on your WordPress website.
Step 2: Drag and Drop the Unfold Widget
Open the page you want to edit with Elementor. In the widget panel, search for “Unfold”.
Drag it to your page, to the section where you want to toggle content.
Step 3: Enter Your Text Content
Paste your long text into the widget.
This is the ideal tool for use cases like blog excerpts, terms and conditions, product specifications, or any expandable info block you can think of.
Step 4: Customize the Toggle Behavior
The Unfold widget lets you customize toggle behavior. Define your icon type, button labels like “Read More” or “Show More,” icon position, and collapse button text.
There is also the option to add extra buttons, if you wish.
Step 5: Style the Widget
Within the “Style” tab to the top left, you can match your WordPress website’s design by customizing colors, font styles, padding, and toggle icons using the many styling options in Elementor.
Step 6: Save and Preview
Once you are content with the structure and styling of your content toggle, publish the page.
It is highly recommended to test the toggle functionality on desktop, tablet, and mobile views to ensure everything works as expected.
This method is ideal when you want to reveal additional content without overwhelming the reader.
Next, we’ll look at a widget for a different type of toggle-compliant content.
Want a simple, straightforward follow-along video? Check out our YouTube tutorial:
Method 2: Show and Hide Text Using Accordion Widget
Best For FAQs
When you have multiple sections of content, like FAQs or service breakdowns, the Advanced Accordion for Elementor by The Plus Addons helps organize them cleanly.
Users can expand one item at a time, keeping your page layout neat and focused.
Like the previous widget, the Accordion widget lets you use multiple content sources and add individual icons. Additionally, you can add different types of accordions, like Active, On-Hover, Horizontal, Expand/Collapse content buttons, and more.
Some of these options require that you have the Pro version of The Plus Addons but the core functionalities are expansive and will meet all your needs in one single widget.
For a deep dive into the Accordion widget, check out our article on how to add Accordion in WordPress.
To use the widget, go through the following steps.
Step 1: Add the Accordion Widget
Like before, start by ensuring that the Accordion widget is installed and activated, as shown in the image below.
Navigate to The Plus Addons > Widgets, search for “Accordion” in the search bar, and then turn the toggle next to the widget on.
Now, open a new or existing page within the Elementor editing environment. Search for the Accordion widget in the Elementor editor to the left of your screen.
Drag it onto the section where you want to place collapsible items.
Step 2: Input Your Content Items
Each accordion element has a title and a content area. Add as many items you need, along with their descriptions, media, and formatting options.
Click on first Accordion item and start adding your content.
Step 3: Configure Toggle Settings
Once you’ve added in all the content you want, decide on the toggle settings by determining the alignment, icon visibility, and title tag.
The Plus Addons for Elementor Pro also gives you special options that include On Hover and Horizontal Accordion options, expand and collapse buttons, search bar, slider and pagination, and autoplay.
These can take your website’s user experience up several notches!
Want to try custom animations on your accordions for a better user experience? Learn how to add scroll top animations step by step.
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
Step 4: Customize Icons and Transitions
Choose typography, color, backgrounds, padding, and more, within the Style tab. Design the widget to match your website’s branding perfectly.
Step 5: Save and Test on All Devices
Publish the changes. As a best practice, and as before, preview your web page across various devices and browsers to confirm the accordion works as intended.
Want to learn another way to enhance your FAQ sections? Find out about the 6 best FAQ plugins for WordPress in this article.
Wrapping Up
With more content flooding the web every day, simplicity is key. When trying to make your WordPress website more interactive and digestible, showing and hiding text is one of the simplest ways to make it happen.
By using the Unfold widget for long blocks of text and the Accordion widget for grouped sections like FAQ schemas, you can deliver a smoother experience for your website visitors.
Both widgets are part of The Plus Addons for Elementor, a performance-friendly plugin that also gives you access to 120+ Elementor widgets. These cover everything from content toggles to advanced design options, marketing, and WooCommerce elements.
Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!
Give your WordPress website a chance to set it apart by leveraging The Plus Addons to your benefit.
FAQs on Show and Hide Text in WordPress
Can I show and hide text in WordPress without a plugin?
Yes, you can show and hide text in WordPress without a plugin by using custom HTML, CSS, or JavaScript. However, this requires coding knowledge. If you prefer a no-code solution, plugins like The Plus Addons for Elementor make the process much easier and efficient.
Which is better for toggle effects: unfold or accordion widget?
Choosing between the Unfold and Accordion widget depends on your content. Use the Unfold widget for showing and hiding single blocks of long text. The Accordion widget works better when you need toggle effects for grouped content like FAQs or multiple expandable sections.
Does using toggle text affect WordPress site speed?
Using toggle text in WordPress doesn’t significantly affect site speed, especially when implemented with a lightweight plugin like The Plus Addons for Elementor. In fact, hidden text is great for collapsing lengthy content and reducing the initial content load on your webpage.
How do I add a show/hide toggle for text in WordPress without coding?
To add a show/hide toggle for text in WordPress without coding, use Elementor-compatible widgets like Unfold or Accordion widgets from The Plus Addons for Elementor. These offer drag-and-drop functionality, letting you easily control content visibility without writing a single line of code.
What’s the difference between accordion and toggle in WordPress?
The difference between Accordion and Toggle in WordPress lies in usage. A Toggle (like the Unfold widget) shows or hides one section of text. An Accordion is ideal for grouped content, showing only one section open at a time to save space.
How do I add a read more/less button to a WordPress post?
To add a Read More/Less button to a WordPress post, use the Unfold widget. It allows you to set character or height limits and display customizable “Read More” and “Read Less” buttons, making long content collapsible for better readability and user experience.
