Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Templates
      • Save a page as a template
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Page revisions
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Legacy editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • Home page 🔥
    • Product page 🔥
    • Landing page 🔥
    • Custom sections with Legacy editor
      • Video hero section like Swarovski
      • Featured collections showcase like Puma
      • Multi-column section like SkinnyTeatox
      • Newsletter section like Emmabridgewater
      • Scrolling promotion like Elementmatcha
      • Testimonial section
  • FAQs
    • Foxify Free plan is sunsetting
    • How to report an issue
    • How to change the app language 🌍
    • Pick a theme to work with Foxify
    • Does Foxify work for all the pages in my store?
    • How to get API Secret key in Foxify
    • Completely remove Foxify code from my Shopify theme
    • Foxify Gen 2 Beta Test
    • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS
    • FoxKit AIO Upsell Cross-sell
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • How to add Collapsible content
  • How to edit Collapsible content
  • Manage collapsible items
  • Customize your collapsible content
  • Add content over a collapsible item
  • FAQs

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements
  3. Add and Edit Elements

Collapsible content

PreviousTabsNextTestimonials

Last updated 1 month ago

Was this helpful?

Collapsible content is a great way to organize content and improve the user experience on your website. Easily create and customize collapsible content to present information in a clean, space-saving format using FoxStudio.

🧐 What Are Collapsible content tabs?

Collapsible tabs are content blocks that can be expanded or collapsed with a simple click. They help declutter pages by hiding less important details until the user chooses to see them. This feature is ideal for FAQs, product details, policies, or any other type of content that doesn’t need to be visible at all times.

How to add Collapsible content

Steps:

  1. In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.

  2. In Advanced elements, select Tabs & Collapsible.

  3. Drag the collapsible content onto your canvas.

How to edit Collapsible content

Steps:

  1. Select the relevant collapsible content element in the editor.

  2. All the formatting tools for the element can be found in the Inspector panel.

Manage collapsible items

  • Add new items

Click Add item to add a new collapsible item. You can add up to 20 items within the Collapsible content element.

  • Reorder items:

Rearrange your tabs to change the order in which your content is displayed to your visitors by dragging the six-dot icon.

  • Remove items:

If you no longer need a collapsible item, you can delete it to keep your element up to date.

Customize your collapsible content

Click on the collapsible item you wish to edit.

General setting

Edit the title of the tab to fit your content. Choose an icon from the icon library or upload a custom icon to represent the tab visually.

Design settings

You can design and style different parts and states of the collapsible content.

Use the dropdown menu to choose the specific part you want to design:

  • Element Container

    • Normal State: Customize the container when it is collapsed (not expanded).

    • Open State: Customize the container when it is expanded.

  • Element Header

    • Normal State: Style the header when the tab is not expanded.

    • Open State: Style the header when the tab is expanded.

  • Element Content

    • Customize the content section within the tab.

Add content over a collapsible item

Add whatever elements you want to your collapsible item including text, images, videos, and buttons. Using different content on each tab keeps visitors engaged and encourages them to explore your site further.

Use the Layers panel to easily navigate and manage the hierarchy of elements on your page.

FAQs

How many collapsible items can I add?

You can add up to 20 collapsible items in your collapsible content. However, for optimal user experience, try to keep the number of items reasonable.

Can I use images and videos inside the collapsible content?

Yes! You can add images, videos, links, and even HTML content inside the content section.

Why aren't my collapsible items working?

Hover over the item you want to remove, click the Remove icon.

Pro tip: Make sure you test and ensure the collapsible tabs look good on mobile devices.

Check if there are conflicting scripts on your page. If the issue persists, reach out to our Support team via in-app live chat or email

📱
Layers
✅
happytohelp@foxecom.com