Hide, switch or change the appearance of different contents/particles through a toggle.

# Example using Content Toggle to create a pricing or comparing tables

Monthly

Annual

Features Micro Standard Professional
Advanced Workflows 3 Users 9 Users Unlimited
QA Checks 1 GB / Team member 10 GB / Team member 20 GB / Team member
Google Play Integration Lorem ipsum dolor Lorem ipsum dolor Unlimited
API & Webhooks Access Lorem ipsum Ipsum dolor Unlimited
Source Files Management
Online Translation Editor
Project Access Policies
Vendors Marketplace
Tasks Management
Basic Reports
Activity Streams with Undo options
Translation Memory
Screenshots Assignment

# Unfold Style

1234 Main Street New York 10037 United States
+ 555 - 12 34 678 info@example.com

# You can use Toggle Switcher to toggle between two particles like example below

Monthly

Annual

Basic

Free trial 30 days.

49$

Billed Yearly
  • Free Domain
  • 20GB Cloud Space
  • 1GB Bandwidth
  • Free 10GB Hosting
  • Free 24/7 Support
  • Money Back Guarantee!

Standard

Free trial 30 days.

69$

Billed Yearly
  • Free Domain
  • 20GB Cloud Space
  • 1GB Bandwidth
  • Free 10GB Hosting
  • Free 24/7 Support
  • Money Back Guarantee!

Advanced

Free trial 30 days.

99$

Billed Yearly
  • Free Domain
  • 20GB Cloud Space
  • 1GB Bandwidth
  • Free 10GB Hosting
  • Free 24/7 Support
  • Money Back Guarantee!

How to toggle between two particles?

Just add JL Content Toggle particle and two particles you wish to toggle between, example below with two pricing tables to toggle between

Next, you need to define the toggle css class via Particle Block for each particle, add the title before and after for switcher button like screenshot below
Final step, add the SAME css class for two particles using particle BLOCK SETTINGS. If you are new with Gantry 5, please take a look Using Block Settings here http://docs.gantry.org/gantry5/tutorials/using-block-settings for more information.

For this case, it should be: toggle-pricing

Repeat for the Pricing Table particle 2. Important: You need to add Hidden attribute for Pricing table 2 to set it invisible.

Tag Attributes: add hidden key with EMPLY value like screenshot below