Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
  • Home
  • Article Editor

How to Use Accordions and Tabs

Organize content efficiently with collapsible sections and tabbed views

Written by Aziz Mejri

Updated at September 29th, 2025, by Amanda Helpjuice

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Managing Users Permissions & Accessibility Content Management Analytics Video Tutorials
  • Article Editor
  • Swifty AI
  • Languages & Translations
  • Settings
    User Settings User Behavior Knowledge Base Settings Custom Domain
  • Authentication
  • Customization
    Customization Guides
  • API & Webhooks
    API V3 API V2
  • Billing / Subscription
+ More

Table of Contents

Using Accordions How to Insert an Accordion Using Tabs How to Insert a Tab Inserting Multiple Tabs When to Use Accordions vs. Tabs Best Practices

Helpjuice provides accordions and tabs in the Article Editor to help you structure long or complex articles. Accordions collapse content to reduce scrolling, while tabs let users switch between different sections without leaving the page. Using these features makes your knowledge base more readable, interactive, and professional.

In this article, you’ll learn:

  • How to insert accordions in articles
  • How to insert single or multiple tabs
  • When to use accordions vs. tabs
  • Best practices for organizing content

Using Accordions

Accordions allow you to hide and show sections of content. They are ideal for FAQs, step-by-step instructions, or long explanations where users may only need specific information.

How to Insert an Accordion

  1. Open the Article Editor.
  2. Click the Insert Accordion button.
  3. Add a title for the accordion section.
  4. Enter the content that should appear when the accordion is expanded.
  5. Repeat the process to add multiple accordion sections.

Accordions are best when you want to reduce page length and make scanning easier for readers.

 

Using Tabs

Tabs allow you to display multiple pieces of content in the same area, letting users switch between views without scrolling. They are useful for comparisons, multiple examples, or showing different content formats (e.g., text, images, or code).

How to Insert a Tab

  1. Click the Insert Tab button in the Article Editor
  2. Enter the Tab Title.
  3. Add your content in the Tab Body field.

Inserting Multiple Tabs

  1. Click Insert Tab for each additional tab.
  2. Each tab’s content is displayed individually in the frontend, while in the editor, tabs are stacked vertically.

Use tabs to group related content together so readers can easily navigate between them.

 

When to Use Accordions vs. Tabs

Feature Best Use Case Benefit
Accordion Long content sections, FAQs, detailed instructions Reduces scrolling, keeps articles clean
Tab Multiple related topics, examples, or content variations Lets users switch between content without leaving the page

Best Practices

  • Keep accordion and tab titles clear and descriptive.
  • Avoid nesting too many accordions inside tabs, which can confuse users.
  • Use these features to improve readability, not to hide essential content.
  • Test your article in the frontend to ensure tabs and accordions work as expected.
  • Limit the number of tabs to a reasonable amount (e.g., 3–5) to maintain usability.
accordions interactive elements

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • How to Upload Your Custom SSL Certificate

Copyright © 2025 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 support@helpjuice.com
Expand