Foundation CSS Toggler

The Foundation CSS Toggler component allows you to toggle the visibility of content based on user interaction. This is commonly used for creating collapsible panels, accordions, or toggleable sections on web pages.

1. Basic Usage

To use the Toggler component, wrap the content you want to toggle inside a container element and add the data-toggler attribute to the container. Then, specify the ID of the target content to toggle using the data-toggle attribute.

Example markup for basic usage:

<div data-toggler=".content">
  <button>Toggle Content</button>
</div>

<div class="content" id="example">
  <p>Toggleable Content</p>
</div>

In this example, clicking the button inside the first <div> will toggle the visibility of the content inside the .content element with the ID example.

2. Multiple Toggles

You can use the Toggler component to toggle multiple content elements by specifying multiple target IDs separated by commas in the data-toggle attribute.

Example markup for multiple toggles:

<div data-toggler=".content">
  <button>Toggle Content 1</button>
  <button>Toggle Content 2</button>
</div>

<div class="content" id="example1">
  <p>Toggleable Content 1</p>
</div>

<div class="content" id="example2">
  <p>Toggleable Content 2</p>
</div>

In this example, clicking either button inside the first <div> will toggle the visibility of both content elements with the IDs example1 and example2.

3. Advanced Options

The Toggler component provides additional options for controlling the toggle behavior, such as animation duration, easing effects, and callback functions. These options can be configured using data attributes or JavaScript initialization.

Example markup with advanced options:

<div data-toggler=".content" data-animate="fade">
  <button>Toggle Content</button>
</div>

<div class="content" id="example">
  <p>Toggleable Content</p>
</div>

In this example, clicking the button inside the first <div> will toggle the visibility of the content inside the .content element with the ID example using a fade animation.

Conclusion

The Foundation CSS Toggler component provides a simple yet powerful way to toggle the visibility of content on web pages. Whether you need to create collapsible panels, accordions, or toggleable sections, the Toggler component offers flexibility and customization options to meet your needs.

Archive