1LD Tutorials & Blogs

Tutorials

Setup

After adding the stack to the editor, select it and in the Toggle Actions > Type setting select either the “Show / Hide” or “Opacity / Visibility” option.

Note that the stack has two possible states. The first and default state is “Disabled”. This is the active state when the toggle is set to the left.

The second state is “Enabled”. This is the active state when the toggle is set to the right.

In the editor you will see two “Drop stacks here” sections. Each sections is controlled by an opposite state.

When using the Show / Hide action: Anything placed into the “Disabled” section will only be visible when the toggle is in the disabled state. Likewise, anything placed into the “Enabled” section will only be visible when the toggle is in the enabled state. If you only wish to display content when the toggle is in the enabled state, do not place any stack content into the “Disabled” section.

When using the Opacity / Visibility action: Anything placed into the “Disabled” section will be visible when the toggle is disabled and anything in the “Enabled” section will only be partially visible. When the toggle is enabled the opposite will be true. The opacity of the inactive state can be set in the Toggle Actions > Opacity setting. If you only wish to change the opacity of a single section of content, do not place any stack content into the “Disabled” section.

By default the toggle will be in the disabled state when the page is loaded. You can choose to have the toggle in the enabled state by turning on the Toggle Styles > Start enabled option.

For information about styling the toggle see the Toggle Styles section below.

Toggle Styles

Size: This setting adjust the over all size of the toggle graphic.

Type: Choose from 5 different toggle types. Each type functions the same and this setting only adjust the appearance of the toggle.

Style: Choose from 3 different styles. Each style modifies the appearance of the toggle based on the selected toggle type.

Shape: Adjust the rounding of the toggle.

Align: Change the alignment of the toggle based on the available space to the left and right.

High contrast: Turn this on to adjust the contrast of the shadows. This should be enabled if you are using a dark color background or dark color toggle background. This setting is only available when using the “Detailed” Style option.

Show labels: Turn this on to add text labels or images to the left and right of the toggle.

Start enabled: Turn this on to change the default state of the toggle to enabled.

Colors:

Actions by Class

The Toggle Actions > Type setting’s “Show / Hide” and “Opacity / Visibility” options are an easy way setup up content that is directly below the toggle. If you want to place the toggle somewhere away from the content use the “Show / Hide by Class” or “Opacity / Visibility by Class” options.

When these options are selected there will not be any sections for you to add the disabled and enabled content to. Instead you will need to define the content by adding classes. In the Toggle Actions > Class setting you can define a custom class name for both the enable and disabled states. These class names should be unique and cannot contain any spaces or special characters other than dashes and underscores.

Examples of usable class names:

my-unique-class-on
my-unique-class-off

my_unique_class_on
my_unique_class_off

myUniqueClassOn
myUniqueClassOff

After creating a class name for each state you can then add them to relevant stacks content. If you are using Stacks 4, select any stack you want to apply the toggle action to and add the class name to the HTML > CSS classes setting.

Alternatively, you can download this free class stack that will allow you to define a class name to any stacks content placed inside of it.

When using the Show / Hide by Class action: Any stack or element with the defined “Enabled” class (my-unique-class-on in this example) will only show when the toggle is in the enabled state. Likewise, Any stack or element with the defined “Disabled” class (my-unique-class-off in this example) will only show when the toggle is in the disabled state.

When using the Opacity / Visibility by Class action: Any stack or element with the defined “Enabled” class (my-unique-class-on in this example) will be visible when the toggle is disabled and any stack or element with the defined “Disabled” class (my-unique-class-off in this example) will only be partially visible. When the toggle is enabled the opposite will be true.

Adding a Class by Class

The Toggle Actions > Type setting “Adding a Class by Class” option will allow you to use the toggle to modify the appearance of any element on your stacks page. This setting is useful for those who are familiar with CSS and want to define custom styles, animations, or effects based on the toggle state.

In the Toggle Actions > Target class field you will need to add the class name of the stacks or elements you want to apply the style, animation, or effect to. Below that in the Add class field you will need to define the class name to be added to those target stacks or elements. This class will be added based on the current state of the toggle. In the enabled state the class will be added and in the disabled state the class will be removed.

.my-unique-class {
  height: 0;
  overflow: hidden;
  transition: all 300ms linear;
}
.my-unique-class.enabled {
  height: 500px;
}

Adding the CSS above to the Page Inspector > HTML > CSS section will make any element with the class name “my-unique-class” collapse or expand into view based on the toggle state.

Custom jQuery/Javascript (Advanced)

The Toggle Actions > Type setting “Custom jQuery/Javascript” option is only meant for users who are familiar with jQuery or Javascript. There are two definable functions that are executed when the toggle is enabled or disabled. When the page is loaded the function related to the default state will execute.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software