Hello,

I'd like to share a tips I designed and implemented on my company's helpcenter that allows to hide/display parts of an article based on organization tags (part I), along with displaying these specific parts in various tabs (part II).

This is especially useful if you want to add operational or technical information to customer facing knowledge based articles.

PART I. Hide parts of an article based on organization tags

For the purpose of this article, let's consider that your articles may have 4 various parts, visible by various targets: public,partners-only, internal-only. Restricted visibility (partner, internal) will be based on organization tags. Feel free to adapt the code below to your own design or a wider number of targets based on your needs.

Step 1: CSS

In your template style.css file, restrict visibility by default:

.internal-only, .partners-only {
  display: none;
}

Step 2: JS

In your template script.js file, add the following code (change the "org_partner" and "org_internal" tags appropriately):

// Check organization
    var i = 0;
    var org_type = "client";
    for (var c in HelpCenter.user.organizations) {
      if (HelpCenter.user.organizations[c].tags.includes("org_partner")){
        org_type = "partner";
      } 
      if (HelpCenter.user.organizations[c].tags.includes("org_internal")){
        org_type = "internal";
      } 
    }

    // Show/Remove internal / partners sections
    switch(org_type){
      case "internal":
        $(".internal-only").show();
      	$(".partners-only").show();
        break;
      case "partner":
        $(".internal-only").remove();
        $(".partners-only").show();
        break;
      default:
        $(".internal-only").remove();
      	$(".partners-only").remove();
        break;
    }

This will show both internal and partners section for internal logged-in users. For "partners", it will show the partners section and remove the internal section. And it will remove both partners and internal sections for other users.

Step 3: Edit Code in your article body

In the body of your article, clic the EDIT CODE button then simply surround the parts you want to restrict visibility with:

YOUR ARTICLE BODY
VISIBILITY BASED ON USER SEGMENTS

<div class="partners-only">
   TEXT RESTRICTED TO PARTNERS
</div>
<div class="internal-only">
   TEXT RESTRICTED TO INTERNAL USERS
</div>

PART II : Display restricted text in different tabs

1. CSS

Add the following to your template style.css file:

/* TABS */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  border-right: 1px solid #ccc;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

Step 2: JS

After the code already added in part I, add the following:

// TABS
if (($(".internal-only").length>0 || $(".partners-only").length>0) && org_type != "client"){
   // Surround client text with appropriate div
   $(".article-body").html('<div class="tabcontent" id="tab-client">'+$(".article-body").html()+"</div>");
   var tabmenu = '<div class="tab"><button class="tablinks" data-onclick="tab-client" id="tab-client-button">Client</button>';
   if ($(".partners-only").length>0){
      $(".partners-only").appendTo($(".article-body")).addClass("tabcontent").attr('id', 'tab-partner');
      tabmenu += '<button class="tablinks" data-onclick="tab-partner" id="tab-partner-button">Partner</button>';
   }
   if ($(".internal-only").length>0){
      $(".internal-only").appendTo($(".article-body")).addClass("tabcontent").attr('id', 'tab-internal');
      tabmenu += '<button class="tablinks" data-onclick="tab-internal" id="tab-internal-button">Internal</button>';
   }
   tabmenu += "</div>";
   $(".article-body").prepend(tabmenu);
   $(".tabcontent").hide();
   $(".tabcontent").css('padding-top', '6px').css('padding-bottom', '6px').css('padding-left', '12px').css('padding-right', '12px').css('border', '1px solid #ccc'); 
   $(".tablinks").click(function(){
      $(".tabcontent").hide();
      $(".tablinks").removeClass("active");
      var tab = $(this).data("onclick");
      $("#"+tab).show();
      $(this).addClass("active");
   });
   $("#tab-client").show();
   $("#tab-client-button").addClass("active");
}

This code will automatically create the appropriate tabs and tab headers based on the existence of the <div class="internal-only"> or <div class="partners-only">.