Showing/Hiding Elements

Protecting a DOM subtree served by the host site

It is possible to show and hide parts of the website based on different criteria against the member. You can achieve this by adding custom data attributes to the DOM nodes (HTML tags) you want to conditionally hide / show.

You can only use this feature if you are able to add these attributes. Adding data attributes is not supported by all CMS systems.

The attributes data-ms-show and data-ms-hide control whether to show or hide the element if the criteria (the value of the data attribute) is met. Let's start with an example

<div>
  <span data-ms-show="paid">
    Awesome content!
  </span>
  <span data-ms-hide="paid">
    Sorry, you need to be on a paid plan to access this content!
  </span>
</div>

If you want to avoid any Javascript loading delays for our data attributes (which can look like a flicker) when an element is hidden a split second after page load, we recommend you add inline styling to not display the element. For example:

 <span data-ms-show="paid" style="display:none;">
   Awesome content for paid customers
 </span>

Keep in mind, the attributes will also do their inverse automatically. For example, the 'Awesome content!' text in the code snippet below would be hidden automatically if the member is not currently logged in and actively on a paid plan:

<span data-ms-show="paid">
  Awesome content!
</span>

Criteria

Criteria (the value of the data attribute)	Matches if
auth	Member is logged in
free	Logged in member has at least 1 free plan
paid	Logged in member has at least 1 paid plan
plan(n)	Logged in member is part of plan "n" Replace "n" with a plan id. Plan ids can be found at the end of the plan's signup link.
plan(n,m,...)	You can also provide multiple plan ids. Matches if the Member is part of any of the listed plans

If you use data-ms-show and data-ms-hideattributes in pairs, using the same criteria (see the example above) you can make it so that either the content or a placeholder (containing a signup link?) is shown.