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_global/components/contact-decision-tree/content/1.json">
Chambray twee pinterest.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/2.json">
Brunch meditation hashtag.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/3.json">
Bushwick cronut letterpress.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/4.json">
Gentrify pug vinyl.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/5.json">
Celiac literally truffaut.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/1.json">
Locavore cred poutine.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/2.json">
Street kogi brunch.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/3.json">
Whatever chia typewriter.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/4.json">
Chartreuse celiac lumbersexual.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/5.json">
Heirloom listicle poutine.
</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:
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_global/components/contact-decision-tree/content/1.html">
Kitsch crucifix pabst.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/2.html">
Slow-carb kitsch truffaut.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/3.html">
Pitchfork typewriter wolf.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/4.html">
Salvia gentrify asymmetrical.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/5.html">
Mustache chicharrones health.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/1.html">
Taxidermy bitters sartorial.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/2.html">
Phlogiston readymade kitsch.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/3.html">
Hella church-key freegan.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/4.html">
Semiotics organic banjo.
</a>
</li>
<li class="vi-contact-decision-tree__item">
<a class="vi-contact-decision-tree__trigger" href="/teva_global/components/contact-decision-tree/content/5.html">
Yr +1 fingerstache.
</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.
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).
Usage documentation #
Usage documentation can be found here.
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