Accordion-Tabs Plugin FAQs

Written By Omari Harebin

Installation & Setup

Basic Setup

Video Tutorial: How to use the Accotab with Fluid Engine

Standard Implementation

Add this code to your site's header via Settings > Advanced > Code Injection:

<!-- Plugin Accordion-Tabs -->
<link href="/s/plugin-accotabs.css" rel="stylesheet">
<script src="/s/plugin-accotabs.js"></script>
<script>pluginAccordion();</script>
<!-- end Plugin Accordion-Tabs -->

Why aren't my tabs/accordions functioning when clicked?

Step-by-step troubleshooting:

  • Check file uploads - Both CSS and JS files must be present

  • Verify code injection - Must be in Header section

  • Test JavaScript - Open browser console (F12) and look for errors

  • Validate markup - Ensure content has required classes/attributes

  • Clear cache - Test in incognito mode

Common JavaScript errors and fixes:

  • pluginAccordion is not defined = JS file didn't load

  • $ is not defined = jQuery dependency issue

  • Cannot read property of undefined = Markup structure issue

How do I set up the content structure for tabs/accordions?

Basic HTML structure:

<div class="accordion-container">
    <div class="accordion-item">
        <div class="accordion-header">Tab Title 1</div>
        <div class="accordion-content">Your content here</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Tab Title 2</div>
        <div class="accordion-content">More content here</div>
    </div>
</div>

In Squarespace:

  1. Add a Code block

  2. Insert the HTML structure above

  3. Replace sample content with your actual content

  4. Save and test

Why do all my tabs content show at once instead of hiding/showing?

This indicates JavaScript isn't initializing:

  • Plugin files not loading - Check file paths and uploads

  • Code injection errors - Verify syntax in header injection

  • Timing issues - Plugin loading before page elements

  • Conflicts - Other JavaScript interfering

Quick test: Add this to browser console: typeof pluginAccordion

  • Should return "function" if plugin loaded correctly

  • Returns "undefined" if plugin failed to load

Responsive Design

Can I have the regular tabs on desktop view and accordion tabs on mobile view?

Yes! This is a built-in feature of the plugin. The design automatically adapts based on screen size.

How do I make tabs work better on mobile devices?

Mobile-optimized CSS:

@media screen and (max-width: 767px) {
    .accordion-header {
        padding: 12px 15px;
        font-size: 14px;
        /* Larger touch targets */
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .accordion-content {
        padding: 15px;
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Stack tabs vertically on mobile */
    .accordion-container {
        margin-bottom: 20px;
    }
}

Should tabs convert to accordions on mobile?

Best practice: Yes, for better mobile UX

@media screen and (max-width: 767px) {
    /* Force accordion style on mobile */
    .tab-nav { display: none; }
    .accordion-item { margin-bottom: 5px; }
    .accordion-header { display: block; }
}

Customization & Styling

How to position accordion icon on the left

Paste this below the plugin injection code:

<style>
/* Plugin Accotabs - Place Accordion Icon On Left */
html .c-tabs__accordion-tab {
    display: flex;
    justify-content: flex-start;
}
html .c-tabs__accordion-tab .c-tabs__tab-title {
    width: auto;
    flex-direction: row-reverse;
}
html .c-tabs__accordion-tab .c-tabs__tab-title::before {
    margin-left: 0;
    margin-right: 0;
}
html .c-tabs__accordion-tab .c-tabs__tab-title::after {
    margin-left: 0;
    margin-right: -1.626em;
}
/* end Plugin Accotabs - Place Accordion Icon On Left */
</style>

How to remove paddings

Paste this below the plugin injection code:

<style>
/* Plugin Accotabs - Remove Paddings */
.c-tabs .page-section,
.c-tabs .content-wrapper,
.c-tabs .content {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 1px !important;
}
</style>

Can I style individual tabs differently?

Yes, use CSS targeting specific tabs:

/* Target by position */
.accordion-item:nth-child(1) .accordion-header { 
    background: #blue; 
}
.accordion-item:nth-child(2) .accordion-header { 
    background: #red; 
}

/* Or add custom classes */
.accordion-item.special .accordion-header {
    background: #green;
    font-weight: bold;
}

How do I customize the tab appearance and animations?

Complete styling example:

/* Tab headers */
.accordion-header { 
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 16px;
} 

.accordion-header:hover {
    background: #e9e9e9;
}

.accordion-header.active {
    background: #007cba;
    color: white;
}

/* Tab content */
.accordion-content { 
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    display: none; /* Hidden by default */
    animation: slideDown 0.3s ease;
}

.accordion-content.active {
    display: block;
}

/* Smooth animations */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

Can I set a default tab to be open when the page loads?

Method 1: Add active class

<div class="accordion-item active">
    <div class="accordion-header">Default Open Tab</div>
    <div class="accordion-content">This content shows by default</div>
</div>

Method 2: Plugin configuration

pluginAccordion({
    'defaultOpen': 1, // Opens first tab (0-indexed)
    'multipleOpen': false
});

Can I make multiple accordions open at the same time?

Yes, configure the plugin:

pluginAccordion({
    'multipleOpen': true,
    'collapseOthers': false
});

Advanced Layout Options

Make Tabs Vertical

To make tabs vertical, add this style after the plugin code:

<!-- Make Tabs Vertical -->
<style>
.c-tabs__wrapper:not(.is-accordion) .c-tabs {
    display: flex;
    flex-wrap: wrap;
}
.c-tabs__tablist {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
}
.c-tabs__tablist[hidden] {
    display: block;
    max-width: 200px;
}
.c-tabs__tablist li {
    margin: 0 !important;
}
.c-tabs__tablist::after {
    display: none !important;
}
.c-tabs__tablist + .c-tabs__content {
    flex: 1 1 0;
}
/* Disable Accordion */
@media (min-width: 641px) {
    .c-tabs__tablist[hidden] .c-tabs__tab {
        max-width: 0;
    }
}
</style>
<!-- end Make Tabs Vertical -->

Multiple Tab Sets & Advanced Usage

Can I have multiple tab sets on the same page?

Yes, use different containers with unique IDs:

<!-- First tab set -->
<div class="accordion-container" id="tabs-1">
    <!-- Tab items here -->
</div>

<!-- Second tab set -->
<div class="accordion-container" id="tabs-2">
    <!-- Different tab items here -->
</div>

Initialize separately:

pluginAccordion({
    'selector': '#tabs-1',
    'multipleOpen': false
});

pluginAccordion({
    'selector': '#tabs-2', 
    'multipleOpen': true
});

Product Page Integration

Add the same tabs to all products

To add the same tabs to all products, add this code before the plugin code. Then set tabs URL in tabsOptions:

<!-- Plugin Accotabs - Add Tabs To Product Additional Section -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script>
(function() {
////////////////////////////////////////////////////////////////////////////////
var tabsOptions = {
  url: 'tabs-url', // Tabs URL
  design: false // Tabs Design ('accordion', 'tabs')
};
// To add tabs only to products with certain categories, set filterByCategory
// to true and add categories to categoriesFilter
var filterByCategory = false;
var categoriesFilter = [
  'apple',
  'orange',
];
////////////////////////////////////////////////////////////////////////////////
function createTabs(tabsOptions){var tabs=document.createElement("div");return tabs.className="js-accotabs",tabs.setAttribute("data-url",tabsOptions.url),tabsOptions.design&&tabs.setAttribute("data-design",tabsOptions.design),tabs}function addTabsToAdditionalSection(tabsOptions){var additionalSection=document.querySelector(".ProductItem-additional")||document.querySelector(".ProductItem-summary")||document.querySelector(".product-description");additionalSection&&additionalSection.appendChild(createTabs(tabsOptions))}function getPostCategories(){var wrapper=document.querySelector(".hentry"),categories=[];return wrapper.className.split(" ").forEach((function(c){-1!==c.indexOf("category-")&&categories.push(c.replace("category-",""))})),categories}function filterCategories(categories){return categories.filter((function(c){return categoriesFilter.includes(c)})).length}function handler(){if(!document.querySelector(".collection-type-products.view-item"))return null;filterByCategory&&filterCategories(getPostCategories()),addTabsToAdditionalSection(tabsOptions)}document.addEventListener("DOMContentLoaded",handler),window.addEventListener("mercury:load",handler);
})();
</script>
<!-- Place Tabs After Additional Content -->
<style>
.ProductItem-additional {
    display: flex;
    flex-direction: column
}
.ProductItem-additional .sqs-layout {
    order: 0
}
.ProductItem-additional .c-tabs__wrapper {
    order: 1
}
</style>
<!-- end Plugin Accotabs - Add Tabs To Product Additional Info -->

Move Tabs Under Price on Product Page

To move tabs under price on a product page, add this code after the plugin code in Code Injection:

<!-- Move Tabs Under Price on Product Page -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4/dist/ready.umd.min.js"></script>
<script>
function moveTabsUnderProductPrice(){
  ready('.collection-type-products.view-item .c-tabs__wrapper', function(tabs) {
    var price = document.querySelector('.product-price');
    price.parentNode.insertBefore(tabs, price.nextElementSibling);
  });
}
moveTabsUnderProductPrice();
</script>
<style>
  .collection-type-products.view-item .c-tabs__wrapper {
    order: 3;
  }
</style>
<!-- end Move Tabs Under Price on Product Page -->

Linking & Navigation

Is there a way to set links so that they will land users on the same page, but different tabs on that page?

Yes, you can create deep links to specific tabs using URL fragments and JavaScript to automatically open the correct tab when the page loads.

Troubleshooting

Why do my tabs not work after a Squarespace update?

Post-update checklist:

  • Re-upload plugin files - Updates may affect file system

  • Check code injection - Verify it's still in place and correct

  • Clear all caches - Browser, site, and CDN

  • Test basic functionality - Try simple accordion first

  • Contact plugin support - May need updated version

How do I troubleshoot tabs that partially work or behave inconsistently?

Systematic debugging:

  1. Browser console check - Look for JavaScript errors

  2. Markup validation - Ensure consistent HTML structure

  3. CSS conflicts - Temporarily disable other styles

  4. Plugin conflicts - Disable other plugins temporarily

  5. Content testing - Try with minimal content first

Common partial-failure causes:

  • Inconsistent markup between tabs

  • CSS specificity conflicts

  • Content loading issues (images, embeds)

  • JavaScript timing problems

Configuration Examples

Basic Configuration

pluginAccordion();

Advanced Configuration

pluginAccordion({
    'selector': '.custom-accordion',
    'defaultOpen': 0,
    'multipleOpen': true,
    'collapseOthers': false,
    'animationSpeed': 300
});

Multiple Instances

// First instance
pluginAccordion({
    'selector': '#accordion-1',
    'multipleOpen': false
});

// Second instance  
pluginAccordion({
    'selector': '#accordion-2',
    'multipleOpen': true,
    'defaultOpen': 1
});

For additional support, ensure your HTML structure follows the required markup pattern and check the browser console for any JavaScript errors.

Omari Harebin

Founder of SQSPThemes.com, one of the worlds most trusted Squarespace resources.

https://www.sqspthemes.com
Previous

Product Color/Image Swatch Variant Plugin FAQs
Next

Sidebar Plugin FAQs