Tip: How to Show/Hide HTML content based on user tags

9 Comments

  • Alejandro Colon

    Great article. One thing I would suggest though is to use vanilla javascript so that all Guide admins can use your post. Currently, Guide templates "v2" do not use jQuery, which would cause the code to not work. 

    0
  • Jordan Dayton

    Thanks for chiming in here @.... What exactly should I change? I'm happy to make any updates that makes this usable for others. This code is working well for me.

    (Though I did notice one issue... when I visit the page with this code on it, everything displays, as expected... only to those who have a certain TAG associated with their account. If I hit the "Refresh" button on the page, the custom code bit disappears... even if you're a user with the "ticket-access" tag. Any ideas on how to address/debug that?)

    0
  • Alejandro Colon

    I am not sure what is going on with the page refresh. It might have something to do with caching or your code is not running on subsequent page refreshes. I would have to try and replicate it myself. Maybe someone with more knowledge can help out with that. 

    As for the code changes, it should be as simple as the following:

     

    Replace 

    $("div.ticket-access").show();

    With

    document.querySelector('.ticket-access').style.display = "revert";

     

    Replace

    $("div.org-access").show();

    With

    document.querySelector('.org-access').style.display = "revert";

     

    Let me know if that doesn't work but it should.

    0
  • Adam Mark

    This is just awesome :)

    0
  • Morgan King

    Has anyone ran into this not working on Theme version 2.9 even after the above replacements in the previous comments suggest?

    0
  • Joshua Henry

    I'm also finding that this approach is not working (on template version 2.19.2). The desired actions using 'document.querySelector' are happening, but not conditionally based on the user or organization tag.

    Can anyone confirm whether or not if (HelpCenter.user.tags=="_____") works?

    0
  • Sarah

    I am also not able to use either snippets of code. The text displayed within the div is not displaying at all. The reason I need this to work is so that I can have only one article that displays content for our customers, but display additional content within the same article that is specific to employees only. This will remove the need to keep one internal article for employees and one external article for customers.

    Any help would be greatly appreciated, thank you in advance!

    Here is what I used in my script.js file:

    var orgs = HelpCenter.user.organizations;
    for (var i = 0; i < orgs.length; i++) {
      if (orgs[i].name == 'thread research employees') {
       $("div.thread_employees").show();
      }
    }

    Here is what I used in my style.css file:

    .thread_employees {
    display: none;
    }

    Here is the HTML code that I am using in articles:

    <div class="thread_employees">
      <hr>
      <h2 style="color: #3f99b2;">
        <strong>Test</strong>
      </h2>
      <ul>
        <li>Jira Ticket: 1520479</li>
      </ul>
    </div>
    0
  • Sarah

    Hi Ronald, thanks so much for your suggestion and quick reply! I actually got the script to work, I was placing it in the incorrect place. 

    0
  • Maeve Tracy

    I had a small problem with this script where is stopped working for some users. I eventually figured out is was where customers had more than 1 tag. 

    So I switched the code to this and it works perfectly.

     

    if (HelpCenter.user.tags.includes("ticket-access"))
    0

Please sign in to leave a comment.

Powered by Zendesk