Toggles

Use toggles to organize your article content in a way that makes it easy for your visitors to find what they're looking for.

The default template used by the Toggles extension is simple and responsive. All patterns shown on the page support accordion functionality, which can be enabled using the data-accordion="true" on the list element used to create the toggles.

The default toggles template
View code
<template id="tmpl-toggles">
  <% if (children.length) { %>
    <ul class="list-unstyled list-bordered my-6 border border-radius" id="<%= id %>">
      <% children.forEach(function(child, index) { %>
        <% var isActive = (initial === index); %>
          <li class="px-5 py-1">
            <a class="toggle-title font-semibold text-inherit hover:text-primary<% if (isActive) { %> text-primary<% } %>" data-toggle="collapse" data-active-class="text-primary" aria-expanded="<%= isActive %>" href="#<%= id %>-<%= index %>">
              <%= child.title %>
            </a>
          <div class="collapse<% if (isActive) { %> is-visible<% } %>" id="<%= id %>-<%= index %>" data-parent="<%= parent %>">
            <div class="py-4">
              <%= child.innerHTML %>
            </div>
          </div>
        </li>
      <% }); %>
    </ul>
  <% } %>
</template>

Using the collapse:show and collapse:hide events described on the extension page you can update elements of the default template when toggles expand or collapse.

Toggles with a shadow and active background color
View code
<template id="tmpl-toggles">
  <% if (children.length) { %>
    <div class="list-bordered my-5 border border-radius shadow-xs overflow-hidden" id="<%= id %>" >
      <% children.forEach(function(child, index) { %>
        <% var isActive = initial === index %>
        <div x-data="{ isActive: <%= isActive %> }">
          <a class="flex justify-content-between align-items-center px-5 py-4 font-semibold font-size-lg text-inherit transition hover:no-underline<% if (isActive) { %> bg-primary text-white hover:text-white<% } %>" data-toggle="collapse" data-active-class="bg-primary text-white hover:text-white" aria-expanded="<%= isActive %>" href="#<%= id %>-<%= index %>">
            <%= child.title %>
            <svg class="svg-icon" x-bind:class="{ 'rotate-180': isActive }" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
          </a>
          <div class="collapse<% if (isActive) { %> is-visible<% } %>" id="<%= id %>-<%= index %>" data-parent="<%= parent %>" x-on:collapse:show="isActive = true" x-on:collapse:hide="isActive = false">
            <div class="p-5">
              <%= child.innerHTML %>
            </div>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</template>
Large toggles with background color on hover
View code
<template id="tmpl-toggles">
  <% if (children.length) { %>
    <div class="border border-radius my-5" id="<%= id %>">
      <% children.forEach(function(child, index) { %>
        <% var isActive = initial === index %>
        <div class="font-size-xl">
          <a class="toggle-title px-6 py-5 text-inherit transition hover:text-gray-800 hover:bg-gray-100<% if (index !== (children.length - 1)) { %> border-bottom<% } %>" data-toggle="collapse" aria-expanded="<%= isActive %>" href="#<%= id %>-<%= index %>">
            <span class="mr-auto font-semibold"><%= child.title %></span>
          </a>
          <div class="collapse" id="<%= id %>-<%= index %>" data-parent="<%= parent %>">
            <div class="px-6 py-5 <% if (index !== (children.length - 1)) { %>border-bottom<% } else { %>border-top<% } %>">
              <%= child.innerHTML %>
            </div>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</template>

For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.

Simple flush toggles
View code
<template id="tmpl-toggles">
  <% if (children.length) { %>
    <div class="list-bordered my-5" id="<%= id %>" >
      <% children.forEach(function(child, index) { %>
        <% var isActive = initial === index %>
        <div x-data="{ isActive: <%= isActive %> }">
          <a class="flex justify-content-between align-items-center py-4 font-semibold font-size-lg text-inherit transition hover:no-underline<% if (isActive) { %> text-primary<% } %>" data-toggle="collapse" data-active-class="text-primary" aria-expanded="<%= isActive %>" href="#<%= id %>-<%= index %>">
            <%= child.title %>
            <svg class="svg-icon" x-bind:class="{ 'rotate-180': isActive }" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12">
              <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
            </svg>
          </a>
          <div class="collapse<% if (isActive) { %> is-visible<% } %>" id="<%= id %>-<%= index %>" data-parent="<%= parent %>" x-on:collapse:show="isActive = true" x-on:collapse:hide="isActive = false">
            <div class="pb-4">
              <%= child.innerHTML %>
            </div>
          </div>
        </div>
      <% }) %>
    </div>
  <% } %>
</template>

Toggles patterns are custom micro-templates that you can use with our Toggles extension. To have them applied when you create toggles within your article content, simply copy-and-paste the code into the bottom of your Article page template (article_page.hbs).

You can have have the toggles behave as accoredions, with one opening at a time, by adding a data-accordion="true" attribute to the list that you use to create the toggles. To learn how to actually create toggles within your article content and the other options available, refer to the Toggles extension page.

Related patterns