What do you want to build?

Tabs let visitors switch between panels of content. The code you copy contains only the type you pick here.

Your tabs

    Tab content supports blank lines for new paragraphs, **bold**, *italic*, [link text](https://example.com) and lines starting with - for bullets. Anything else, including HTML, is shown as plain text. Between 2 and 8 tabs.

    Tab style

    On narrow screens the row of tabs scrolls sideways inside its own box. Full width spreads the tabs across the widget when there is room. Without JavaScript, every tab's content is shown one after the other.

    Layout and type

    10 px

    16 px

    Max width: a number of pixels (200 to 2000) or 100%.

    Options

    Leave this off to let your page show through. The colour is still used to pick readable credit text, so set it to your page's background colour.

    A small, visible "Widget by …" link. Thanks for keeping it, you can turn it off.

    Live preview

    Your code

    


    How to add it
    1. Squarespace: edit the page, add a Code Block where the widget should appear, switch off "Display Source" if it is on, then paste the code. Code Blocks depend on your Squarespace plan, so check yours.
    2. Any other site: paste it into any HTML or custom code area on the page, or before the closing </body> tag.
    3. Test it on the live page once. The Squarespace editor may not run the script, so view the published page to check the tabs or the switch.
    4. The code is self-contained: one style block, the markup and a small script, with no external requests. Paste it once for each widget.
    Runs in your browser. Nothing you enter is uploaded or stored.
    How it works
    Four steps. No plugin.
    01
    Pick tabs or pricing
    Tabs for organised content, or a pricing table with a period switch.
    10 seconds
    02
    Add your content
    Your tab text, or your plans, prices and features.
    5 minutes
    03
    Copy the snippet
    One block of code with the styles and script included.
    10 seconds
    04
    Paste it into a Code Block
    Edit the page, add a Code Block, switch off Display Source and paste it in. Code Blocks need a plan that includes them, so check yours.
    2 minutes
    Questions
    Questions about the widget.
    Straight answers about this tool. If yours isn't here, ask me directly.
    Average response·< 1 business day
    Is the pricing toggle a payment tool?
    No. It only shows your prices. Each plan's button links to wherever you take payment or bookings.
    Who enters the prices?
    You do. The tool stores nothing, so check every price and period before you publish.
    Is it accessible?
    Tabs use the standard tab pattern and work with arrow keys. The switch is a real switch control with visible labels.
    What if JavaScript is off?
    The tab content is still readable, with every panel shown in order.
    Does it work outside Squarespace?
    Yes. It works on any site that lets you add code.
    What is the credit link?
    A small, visible link under the widget that points back to this site. It is on by default and you can switch it off. It is marked nofollow.
    The hosting I use
    I host my own sites on Hostinger.
    In my experience it's one of the best hosting options for small business websites, and it's the one I suggest. If you sign up through my link, I earn a small commission at no extra cost to you.
    Check Hostinger plansAffiliate link
    Free tools, plus a free website audit
    Want help with the rest of your website?
    These tools are free to use. If your site needs more than tabs or a pricing table, I design and build custom websites for small businesses, and I offer a free audit that shows you what to fix first.