AB Switch
The finest way to switch between two content containers
The finest way to switch between two content containers. Purpose built, unique and advanced features, endless visual styles.
Key Features
Switch Styles
Countless switch button styles, mix and match to get the custom feel you need.
Click or Hover
You can switch between the content area by click or hover.
Mobile Friendly
The switch interface works fantastic for mobile devices by reducing the content the user needs to scroll through.
Linkable
Create custom URLs to show "B" content as default.
{{{ icon }}}
{{ title }}
{{{ summary }}}
Demo
- Front
- Back
2015 Audi R8
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
2015 Audi R8
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
- "Outline" background switch button style.
- "Hover" to switch titles to toggle.
- "1px" switch break style.
- Coffee
- Tea
Espresso
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
White Tea
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
- "B" default switch selection.
- "Gradient" background switch button style.
- "3px" switch break style.
- Monsters
- Aliens
Spiky Sea Monster
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Flying Alien Scout
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
- "Square" switch button style.
- "Solid" background switch button style.
- "5px" switch break style.
- Actual Drums
- Electronic Drums
Acoustic Drum Kit
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Drum Sampler / Sequencer
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore.
- Features
- Controls
- Countless switch button styles, mix and match to get the custom feel you need. Style changes are viewable in Stacks Edit mode.
- Generous spacing and break style options for switch controls, keeping them clearly separated from content containers.
- Notable Features: Use Multiple AB Switches on the same page. Long text AB Switch titles nicely supported (shown in drum example).
- Advanced Features. Create custom URLs to show "B" content as default. Adjustable mobile break point, making switch button and text smaller. Set "B" Content as the default, instead of "A" content. "Hover" or "Click" switching.
- Switch Area Position (Left / Center / Right)
- Switch Area Top / Bottom / Spacing control
- Switch Area Break style and color control
- Switch Text Custom A / B Title Fields
- Switch Text Title Size control
- Switch Text Selected / Deselected color control
- Switch Button Edges (Round / Square)
- Switch Button Style (Gradient / Solid / Outline)
- Switch Button Background and Knob color control
- Mobile Break Point (switch becomes smaller)
- Optional "Hover" or "Click" to trigger switch
- Optional set "B" content as default shown
- Set Custom Hash URL to trigger "B" content
Screenshots
Tutorials
There are no tutorials for AB Switch at this time.
Downloads
{{ title }}
{{{ description }}}
Uploaded by {{{ from }}}
Updates
v1.1.0
Initial Public Release
v1.3.0
- Removed all dependency on jQuery
v1.2.1
- Dynamic content (ex: sliders) should work better inside the B content. There may be a slight flash of unpropertly sytled content while toggling. But it should work as long the content watches for window resize events.
v1.2.0
- Set hover to be off by default
- Hover or clicking the already active toggle will not trigger a change
- Refactored JS to resolve some performance issues
v1.1.3
- New online Help links when access from inside Stacks Library.
- Improved messages when stacks are missing from library in a project.
v{{ version }}
{{{ notes }}}
© 2025 Weavers Space | Terms of Service | Privacy Policy
"AB Switch is one of my favourite 'one trick pony' stacks and is a key element in how I present my primary site to the world. I provide two starting points. The first (A) is for new visitors, who I have special items to show. The second (B) is for returnees, who may want direct access to the newest information. AB Switch does this perfectly and efficiently."