Contact Decision Tree

v0.0.0

Quickly guide visitors to the correct point of contact for their question or remark.

The component shows three columns. Topic > Category > Answer. When a link is clicked data is retreived from server through Ajax or JSON load. Last column (answer) is always loaded via Ajax. This way the returned markup can be rendered by CMS and can be easily changed.

Examples of Ajax and JSON data are included down this page.

On mobile, the component behaves like a drilldown menu.

In the example the outcome in the answer column are random. Please check the content examples for markup.

Choose a topic

Choose your category

Your answer

<!-- container for example purposes. -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Contact Decision Tree  -->
  <div class="vi-contact-decision-tree" data-method="json">
    <div class="vi-contact-decision-tree__wrap">
      <div class="vi-contact-decision-tree__level">
        <h4 class="vi-contact-decision-tree__title">Choose a topic</h4>
        <div class="vi-contact-decision-tree__content">
          <ul class="vi-contact-decision-tree__list">
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/1.json">
                Phlogiston retro pop-up.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/2.json">
                Cronut austin chicharrones.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/3.json">
                Schlitz twee dreamcatcher.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/4.json">
                Brunch shoreditch kogi.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/5.json">
                Schlitz occupy pinterest.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/1.json">
                Street vhs brooklyn.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/2.json">
                Godard pinterest lomo.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/3.json">
                Meggings wolf hashtag.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/4.json">
                Kitsch beard helvetica.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/5.json">
                Mixtape cardigan irony.
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="vi-contact-decision-tree__level">
        <h4 class="vi-contact-decision-tree__title">
          Choose your category
        </h4>
      </div>
      <div class="vi-contact-decision-tree__level">
        <h4 class="vi-contact-decision-tree__title">Your answer</h4>
      </div>
    </div>
  </div>
</div>

Markup #

The initial render should contain the list with links of the first column (topics). The data-type value can be ajax or json. The last column (answer) is always loaded via Ajax.

Examples second column data:

Examples last column data:

ajax response

Choose a topic

Choose your category

Your answer

<!-- container for example purposes. -->
<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Contact Decision Tree  -->
  <div class="vi-contact-decision-tree" data-method="ajax">
    <div class="vi-contact-decision-tree__wrap">
      <div class="vi-contact-decision-tree__level">
        <h4 class="vi-contact-decision-tree__title">Choose a topic</h4>
        <div class="vi-contact-decision-tree__content">
          <ul class="vi-contact-decision-tree__list">
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/1.html">
                Celiac viral letterpress.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/2.html">
                Knausgaard roof godard.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/3.html">
                Dreamcatcher pinterest cronut.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/4.html">
                Listicle narwhal typewriter.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/5.html">
                Selfies cleanse kickstarter.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/1.html">
                Fixie flannel lomo.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/2.html">
                Pinterest williamsburg kitsch.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/3.html">
                Gluten-free distillery bitters.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/4.html">
                Scenester kombucha keffiyeh.
              </a>
            </li>
            <li class="vi-contact-decision-tree__item">
              <a class="vi-contact-decision-tree__trigger" href="/teva_scs/components/contact-decision-tree/content/5.html">
                Actually sartorial everyday.
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="vi-contact-decision-tree__level">
        <h4 class="vi-contact-decision-tree__title">
          Choose your category
        </h4>
      </div>
      <div class="vi-contact-decision-tree__level">
        <h4 class="vi-contact-decision-tree__title">Your answer</h4>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Download Contact Decision Tree Stylesheet

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascripts are required to display this component.

The following additional javascript is used to display the example(s).

Download Signature Field JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  29 Aug 2024 - Fix file input issue.
  23 Nov 2022 - signature field / contact decision tree integration
  Empty container focus.
  Prevent focus scroll conflicting with positioning
  Incorrect position loading indicator when direction RTL.


Added

  Accessibility: Keyboard accessible.
  RTL support
  Initial draft