Help Center (Zendesk) Custom Formatting - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki
Background: Custom formatting for Zendesk help articles to improve the user experience.
(Adapted from Jason Hedrick's May 2019 documentation) This document provides instructions for adding Javascript to Zendesk help center articles, so we can link directly to a sub-tab within an article.
<div class="tabs">
<div class="tabs-menu">
<span id="tab-1" class="tabs-link is-active">First Tab Title</span>
<span id="tab-2" class="tabs-link">Second Tab Title</span>
<span id="tab-3" class="tabs-link">Third Tab Title</span>
</div>
<div id="tab-content-1" class="tab content-tab">
<p> – Tab 1 content – </p>
</div>
<div id="tab-content-2" class="tab content-tab is-hidden">
<p> – Tab 2 content – </p>
</div>
<div id="tab-content-3" class="tab content-tab is-hidden">
<p> – Tab 3 content – </p>
</div>
</div>-
All
class="tabs-link"elements must have a unique CSS ID (on the respective page only), patterned as"tab-x", withxbeing the integer that sets the ordered placement of the tab (e.g.,"tab-1","tab-2","tab-3"). -
All tab content must be enclosed in a
<div>with a class value of"content-tab"and each div must have an unique CSS ID (on the respective page only), patterned as"tab-content-x"withxcorresponding to the parent menu tab's id.
For example:
<span id="tab-1" class="tabs-link is-active">First Tab Title</span>corresponds to
<div id="tab-content-1" class="tab content-tab">
<p> – Tab 1 content – </p>
</div>- When linking to a page where a tab-selection is desired, the URL must include the query-parameter of 'selected-tab-id' and its id 'tab-x' value (i.e., ?selected-tab-id=tab-x).
For example:
This URL will select the 2nd menu tab ('tab-2') and display the content corresponding to that selected tab (tab-content-2): https://ucsflibrary.zendesk.com/hc/en-us/articles/360024089733?selected-tab-id=tab-2
This URL will select the 3rd menu tab ('tab-3') and display the content corresponding to that selected tab (tab-content-3): https://ucsflibrary.zendesk.com/hc/en-us/articles/360024089733?selected-tab-id=tab-3
If the URL-query string contains other values, prefix with an ampersand: &selected-tab-id=2
Insert the following script at the end of the article's source code.
<script type="text/javascript">// <![CDATA[
//get the query string from the URL (WARNING: this method may NOT work on all browsers!)
const searchParams = new URLSearchParams(window.location.search);
//initialize the 'selected_tab_id' variable
let selected_tab_id;
//check the url for a 'selected-element-id' parameter
if (searchParams.has('selected-tab-id')) {
selected_tab_id = searchParams.get('selected-tab-id');
//the selected-element
if($('#' + selected_tab_id).length) {
//get the element index of the current element
const selected_tab_object = $('#' + selected_tab_id);
var selected_tab_integer = selected_tab_object.attr('id').replace("tab-","");
//alert('"tab-' + selected_element_integer + '" was selected, "tab-content-' + selected_element_integer + '" will be affected!');
}
//you'll want to make sure the id exists before you start operating on the tags
if (document.getElementById(selected_tab_id) !== null) {
//alert("An element with an id of '" + selected_tab_id + "' exists on this page!");
// first, we set all tabs-link's to NOT be 'is-active'...
$('.tabs .tabs-menu span.tabs-link').removeClass('is-active');
// and all tab's to be 'is-hidden'
$('.tabs .content-tab').addClass('is-hidden');
//Now nothing is selected
//So we want to add the proper classes to the appropriate spans and divs
// first, we set the nth tabs-menu tabs-link to class 'is-active'
$("#tab-" + selected_tab_integer).addClass('is-active');
// and the nth tab's content div to remove the 'is-hidden' class
$("#tab-content-" + selected_tab_integer).removeClass('is-hidden');
}
}
// ]]></script>