Tabs and Accordions in Knowledge Article

wow-on-now · ‎02-21-2024

Hi Everyone,

I am curious to see if anyone has tried to successfully have tabs and accordions in a knowledge article which is easy to maintain by authors that are not HTML experts.

Richard Zlobins · ‎04-25-2024

I am not a html expert, but managed to get tabs using the following code:

<p><span style="font-family: verdana, geneva; font-size: 10pt;">This article...</span></p>
<style>/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7),
 .tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8),
 .tabset > input:nth-child(17):checked ~ .tab-panels > .tab-panel:nth-child(9),
 .tabset > input:nth-child(19):checked ~ .tab-panels > .tab-panel:nth-child(10){
  display: block;
}

/*
 Styling
*/


.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
 font-size: 10pt; 
  font-family: verdana;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.tabset {
  max-width: 100%;
}
</style>
<div class="tabset"><!-- Tab 1 --> <input id="tab1" checked="checked" name="tabset" type="radio" aria-controls="Tab-1" /> <label for="tab1">Tab-1</label> <!-- Tab 2 --> <input id="tab2" name="tabset" type="radio" aria-controls="Tab-2" /> <label for="tab2">Tab-2</label> <!-- Tab 3 --> <input id="tab3" name="tabset" type="radio" aria-controls="Tab-3" /> <label for="tab3">Tab-3</label><!-- Tab 4 --> <input id="tab4" name="tabset" type="radio" aria-controls="Tab-4" /> <label for="tab4">Tab-4</label><!-- Tab 5 --> <input id="tab5" name="tabset" type="radio" aria-controls="Tab-5" /> <label for="tab5">Tab-5</label><!-- Tab 6 --> <input id="tab6" name="tabset" type="radio" aria-controls="Tab-6" /> <label for="tab6">Tab-6</label><!-- Tab 7 --> <input id="tab7" name="tabset" type="radio" aria-controls="Tab-7" /> <label for="tab7">Tab-7</label><!-- Tab 8 --> <input id="tab8" name="tabset" type="radio" aria-controls="Tab-8" /> <label for="tab8">Tab-8</label><!-- Tab 9 --> <input id="tab9" name="tabset" type="radio" aria-controls="Tab-9" /> <label for="tab9">Tab-9</label><!-- Tab 10 --> <input id="tab10" name="tabset" type="radio" aria-controls="Tab-10" /> <label for="tab10">Tab-10</label>
<div class="tab-panels">
<section id="Tab-1" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-1</span></p>
</section>
<section id="Tab-2" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-2</span></p>
</section>
<section id="Tab-3" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-3</span></p>
</section>
<section id="Tab-4" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-4</span></p>
</section>
<section id="Tab-5" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-5</span></p>
</section>
<section id="Tab-6" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-6</span></p>
</section>
<section id="Tab-7" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-7</span></p>
</section>
<section id="Tab-8" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-8</span></p>
</section>
<section id="Tab-9" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-9</span></p>
</section>
<section id="Tab-10" class="tab-panel">
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text-10</span></p>
</section>
</div>
<hr />
<p><strong><span style="font-size: 12pt;">Footer</span></strong></p>
<details>
<summary><span style="font-family: verdana, geneva; font-size: 10pt;"><strong>Title</strong></span></summary>
<p><span style="font-family: verdana, geneva; font-size: 10pt;">Text</span></p>
</details><hr />
<p><br />&nbsp;</p>
</div>

Each section in the html is related to a tab link.
For accordion i use the details summary:

<details>
    <summary>Section 1</summary>
    <p>Content for Section 1.</p>
</details>

<details>
    <summary>Section 2</summary>
    <p>Content for Section 2.</p>
</details>

Result:

The editor will sometime cause that the "details summary" accordions will stay open.
The code will look like this:

<details open="open">
    <summary>Section 1</summary>
    <p>Content for Section 1.</p>
</details>

Simple do a search <details open="open"> and replace by <details>

Im still looking for a nice and simple accordion that is usable on Now Mobile, Service Portal and WorkUI.

chapmak · ‎04-25-2024

Nice work, but here is one thing to consider, while you definitely seem adept with HTML, at some point you will leave the company, change positions, laid off, whatever and your replacement may have no or little experience with HTML or CSS stuff and then a nice thing turns into a problem.

Richard Zlobins · ‎04-25-2024

True, that’s why we have it all described in a knowledge article about knowledge management. The article also contains a styling guide to ensure consistency.

Given the complexity of some subjects, we utilize tab-style articles as a “starting point” to provide a structured overview. This approach has proven effective as guidance for service desk agents.

Additionally, styling is not just recommended but also a required checkpoint when an article is being submitted for publication. This ensures that all information is presented clearly and adheres to our established guidelines.

trout1974 · ‎05-09-2024

HI,
Did you have to do something on the backside to get the <section> </section> to stay in the source code? Meaning does something have to be enabled for us to be able to use the "<section>? When I use it currently in Source Code it all works until I save the KB, once I save the KB, the <section> stuff is automatically removed. 😕