Content Toggle Documentation

  • Tony
  • 7 April 2020
  • No comments
  • Docs
Hide, switch or change the appearance of different contents/particles through a toggle. See how Content Toggle can be designed beautifully on Demo Page.

# Content Toggle Package contents

Files Description
jlcontenttoggle.yaml Contains the Content Toggle particle settings.
jlcontenttoggle.html.twig The Twig file to pull information, settings.
_jltoggle.scss The custom Toggle style sheet. Use @import "jltoggle"; in your custom.scss file to import it. Gantry will automatically pick it up and compile it properly.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Content Toggle requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Content Toggle particle (i.e: Home) -> Layout tab -> Drag and drop the Content Toggle Particle from Particles panel (left corner) to the section you want to display the particle.

Settings

Settings Description
Type Select toggle type: Switcher or Unfold

Switcher mode: Dynamically transition through different contents using the tabbed navigation.

Unfold mode: Hide big chunks of content and show them on demand to your users.

Toggle Class Add the particle css class here to Toggle between the content.
Content Before Common settings for Content Before
Title Customize the title.
Content Customize the content.
Process Twig Enable Twig template processing in the content before. Twig will be processed before shortcodes.
Process shortcodes Enable shortcode processing / filtering in the content before.
Content After Common settings for Content After
Title Customize the title after.
Content Customize the content after.
Process Twig Enable Twig template processing in the content after. Twig will be processed before shortcodes.
Process shortcodes Enable shortcode processing / filtering in the content after.
CSS Classes CSS class name for the particle.

Tab Switcher

Settings Description
Toggle Settings Common settings for Toggle
Color Customize the toggle color.
Border Radius Customize the border radius for circle border in percent(%).
Background Customize the toggle background color.
Slider Border Radius Customize the border radius for slider in px.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
Title Style Settings Common settings for Title Style
Style Heading styles differ in font-size but may also come with a predefined color, size and font.
Decoration Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
Predefined Color Select a predefined text color.
Custom Color Customize the title color instead using predefined title color mode.
You need to set the predefined color to None to use the customize color option.
Font Size Customize the title text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
HTML Element Choose one of the elements to fit your semantic structure.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
Content Settings Common settings for Content
Style Select a predefined Content text style, including color, size and font-family.
Predefined Color Select the text color.
Custom Color Customize the content color. Set Predefined Color to None before using this feature.
Font Size Customize the content text font size.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
Card Style Settings Common settings for Card Style
Card Select one of the boxed card styles or a blank card.
Size Define the card’s size by selecting the padding between the card and its content.
Font Size Customize the content text font size.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.

Toggle Between Particles

You can use the Switcher mode to toggle between two particles, here the tutorial to create a toggle switcher between two particles.

Step 1 Drag Content Toggle particle and two particles to toggle between into a section, for this case, I will create a toggle between two Pricing Table particles.

Step 2 Open Content Toggle particle -> select Switcher mode then define the CSS selector for the toggle target to, i.e: toggle-pricing

Step 3 Open the first Pricing Table particle → Block → CSS Classes → then add toggle-pricing into CSS Classes textbox

Step 4 Open the second Pricing Table particle → Block → CSS Classes → then add the same toggle-pricing css class

Important For second Pricing Table, We will add a Tag Attributes key hidden with Empty value to set it invisible by default. The second Pricing Table only visible when clicking on Toggle button. See screenshot below:

Save and check the page result. Please note that you need to add the sample data for your pricing tables in order to see the result when toggling.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

Leave a Reply

You must be logged in to post a comment.