Tabs and Accordions in Knowledge Article

[wow-on-now]

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. 

[trout1974]

I got tabs to work in Vancouver last week.. here is the html coding.. it is pretty easy for KM managers to figure it out.. just copy and past the HTML coding and then fill in the information. Hope it's helpful for you. 😊

<div class="tabbed"><input id="tab1" checked="checked" name="css-tabs" type="radio" /> <input id="tab2" name="css-tabs" type="radio" /> <input id="tab3" name="css-tabs" type="radio" /> <input id="tab4" name="css-tabs" type="radio" />

<ul class="tabs">

<li class="tab"><label for="tab1">TAB 1 </label></li>

<li class="tab"><label for="tab2">TAB 2 </label></li>

<li class="tab"><label for="tab3">TAB 3 </label></li>

<li class="tab"><label for="tab4">TAB 4 </label></li>

</ul>

<div class="tab-content">

<h4>Tab 1 content</h4>

<p>tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...tab1 data...</p>

</div>

<div class="tab-content">

<h4>Tab 2 content</h4>

<p>tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...tab2 data...</p>

</div>

<div class="tab-content">

<h4>Tab 3 content</h4>

<p>tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...tab3 data...</p>

</div>

<div class="tab-content">

<h4>Tab 4 content</h4>

<p>tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 data...tab4 ...</p>

</div>

<style>

  a {

    color: #21D4FD;

    transition: all 0.3s;

  }

  a:hover {

    color: #B721FF;

  }

  .tabbed {

    overflow-x: hidden; /* so we could easily hide the radio inputs */

    margin: 15px 0;

    padding-bottom: 10px;

    border-bottom: none;

  }

  .tabbed [type="radio"] { /* hiding the inputs */

    display: none;

  }

  .tabs {

    display: flex;

    align-items: stretch;

    list-style: none;

    padding: 1px;

  }

  .tab > label {

    display: block;

    margin-bottom: -1px;

    padding: 2px 15px;

    border: 1px solid #ccc;

    background: #eee;

    color: #666;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    cursor: pointer;

    transition: all 0.3s;

   border-bottom: 2px;

   border-radius: 5px 5px 0 0; /* Optional: Adds rounded corners to the top */

  }

  .tab:hover label {

    border-top-color: #333;

    color: #333;

  }

  .tab-content {

    display: none;

    color: #777;

  } /* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */

  .tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,

  .tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,

  .tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,

  .tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label {

    border-bottom-color: #fff;

    border-top-color: #B721FF;

    background: #fff;

    color: #222;

  }

  .tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),

  .tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),

  .tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),

  .tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4)

  {

    display: block;

  }

</style>

[LaurenArmbrust]

Can you use the content option 'Tabs' in content library? I'm trying something similar now think it will work 😄

[trout1974]

I am sorry, I don't use the content library, so I am not sure.