SqueezeBox

Smart. Stylish. Premium Accordion

SqueezeBox 3 is the ultimate accordion stack for users who demand both flexibility and finesse. This premium release intelligently adapts to your styles and layout needs, delivering a seamless visual experience without manual tweaking. SqueezeBox 3 is packed with great accessibility features, easy customization options, smart URL linking, and super smooth animations. This makes it a breeze to whip up professional and engaging content sections that look good and work seamlessly, no matter the device or design you’re using.

Key Features

Demo

SqueezeBox Smart Layouts

SqueezeBox is built to adapt to a wide variety of styles. It intelligently interprets your design choices and adjusts the layout to match your intent. For example, if you apply rounded corners to your accordion, SqueezeBox knows when to square off those corners—such as when adjacent sections are touching and round corners would look visually incorrect.

You don’t have to manage these edge cases yourself. SqueezeBox handles them automatically, so your design stays clean and consistent without extra effort.

The demos below highlight some of the layout features available. These options can be mixed and matched to create exactly the look you’re after.

Each demo starts with a short summary of the features being showcased in that layout.

Divider + Unify

  • About This Demo

    This is the default look and feel of SqueezeBox. This instance was added to the page and had zero settings changed. Each section has a divider and the content has a background to give the entire accordion a unified look.

    • Notice how the radius applied is just around the outside edges of the SB container.

No Border

  • About This Demo

    This demo removes all borders and the background from the content. The background from the site or whatever layout SB is inside will come through the content. This also make the titles turn into floating elements of their own when open. Obviously the colors have been modified as well.

    • Note the round corners when you open a section. SB adds the roundness to everything you would expect it to.
    • The animation for the icon has been change to rotate instead of flip.
    • The open and close animation has been changed as well.

Gutter + No Border

  • About This Demo

    This demo adds gutters which give SqueezeBox a completely different look and feel. Each SB Item feels like a separate element on it's own. There is also a custom icon along with a custom animation for that icon.

    Like the previous demo, the content has no background.

Gutter + Border + Unify

  • About This Demo

    This demo adds a uniform border around each item. When open, each item feels like an encapsulated element. The header and content were set to be the same color to enhance that effect. You could have them be different colors as well though.

    There is a custom icon and custom animation for it. It rotates in the opposite direction of the default rotate animation.

SqueezeBox Traditional FAQ Layout

The below demo is a traditional FAQ style layout where there are no backgrounds added at all. Notice that there is a custom icon with a custom animation that sclaes the icon when the item is opened.

In this demo, the first item is opened on page load. You can also have multiple items open at once.

SqueezeBox supports linking directly to an item as well. This works both on page load and via a link. Click here to open FAQ #2.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Reviews

We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.

Leave your review Thanks!

Screenshots

Tutorials

Loading...

Downloads

Updates

See all updates Thanks!

You may also like…

HANGOUTS

Next Hangout Session
Friday, December 5

Subscribe

For product releases and updates by email, please subscribe below.

© 2025 Weavers Space | Terms of Service | Privacy Policy