Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📘 Data Components
Accordion Component

Accordion Component

What is the Accordion Component?

The accordion component enables you to expand and collapse data when the title of the record is clicked. 

When should I use Accordions? 

There are several use cases the most common and widely used is when showing questions and answers like FAQ's. 

Adding Accordions

To add a Accordion choose the Accordion component and then choose the data table to be used for this Accordion. 

Inside the Accordion component you'll see have some standard options available in other components, as well as unique settings only available in the Accordion component. 

  1. Data Source
  2. Accordion Options
  3. Accordion Element
  4. Design

Data Source

The Data Source tab is where you can filter which records will be displayed in this component with some 'server-side' filtering. Since this is universal to all components you can view it as its own article here. Learn more about Data Source. 

 

Accordion Options

Under the General option you'll have 2 options: 

  • Title
  • Description

Title

Title to be used on top of the accordion component

Description

Description for your own reference. 

 

Display Options

  • Accordion Layout
  • No Data Text
  • Record Limit
  • Add Line Between Records
  • Allow Only Single Panel Opened

 

Accordion Layout

Here you can choose 1, 2, 3, 4 or 6 columns. 

Accordion-Columns.jpg

 

No Data Text

Choose what to display when no records are found. 

Record Limit

Choose how many records should be displayed in the Accordion.

Add lines between records

Enabling this option will add a horizontal rule between each record. 

 

Allow Only Single Panel Opened

When this is enabled, only a single record will be opened at a time. Any other opened panels will be collapsed. 

accordion-single-compressed.gif

Enable Inline Edition

Enable this option to allow records to be edited. 

Only the body of the accordion can be edited via inline editing, the title can't. 

 

Accordion Element

In the accordion Element you choose the title field that should be used int he accordion as well as which fields should be visible in the body of the component. 

accordion-title-body.jpg

Design

In the design tab choose many any custom design options. 

 

Title Settings

  • Font Size
  • Align
  • Color
  • Selected Color
  • Icon
  • Selected Icon

 

Content Settings

  • Color
  • Font Size
  • Align
  • Padding

 

Content Settings

  • Color
  • Size
  • Alignment
  • Padding

 

Border Settings

  • Position
  • Color
  • Selected Color
  • Width
  • Radius

Position

 

Element Settings

  • Background Color
  • Selected Background Color
  • Margins

 

Shadow Settings

  • Depth
  • Selected Depth

 

Diagram overview:

accordion-design.jpg

 

How did we do ?

Previous Article
Timeline Component
Next Article
Card Component
Article Navigation
  • What is the Accordion Component?
  • When should I use Accordions?
  • Adding Accordions
  • Data Source
  • Accordion Options
  • Title
  • Description
  • Display Options
  • Accordion Layout
  • No Data Text
  • Record Limit
  • Add lines between records
  • Allow Only Single Panel Opened
  • Enable Inline Edition
  • Accordion Element
  • Design
  • Title Settings
  • Content Settings
  • Content Settings
  • Border Settings
  • Element Settings
  • Shadow Settings
  • Back to top
    Developer portal Tadabase Community
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational