Showing/Hiding Content with Data Attributes

Article author
Josh Lopez

You can show or hide elements on your site based on whether a user is logged in or their member state using Memberstack data attributes.

Show Content to Logged In Members

Use the data-ms-content="members" attribute to show an element only to logged in members:

 <div data-ms-content="members"> Members Only Content </div> 

Hide Content from Logged In Members

Use the data-ms-content="!members" attribute to show an element only to logged out users:

 <div data-ms-content="!members"> Logged Out Users Only Content </div> 

Show Content to Verified Members

Use the data-ms-content="verified" attribute to show an element only to verified members:

 <div data-ms-content="verified"> Verified Members Only Content </div> 

Additional Member State Options

Here are some additional data attributes you can use to show/hide content based on member state:

  • data-ms-content="is-trialing" - Show content to members in a trial period
  • data-ms-content="!is-trialing" - Show content to members not in a trial
  • data-ms-content="free-plans" - Show content to members with a free plan
  • data-ms-content="!free-plans" - Show content to members without a free plan
  • data-ms-content="paid-plans" - Show content to members with a paid plan
  • data-ms-content="!paid-plans" - Show content to members without a paid plan
  • data-ms-content="no-plans" - Show content to members with no plans
  • data-ms-content="!no-plans" - Show content to members who have a plan
  • data-ms-content="has-password" - Show content to members with a password
  • data-ms-content="!has-password" - Show content to members without a password

Show Content Based on Content Groups

You can also show content based on Content Groups the member has access to using:

 <div data-ms-content="CONTENT_GROUP_ID"> Content Group Content </div> 

Replace CONTENT_GROUP_ID with the actual ID of the Content Group.

This allows you to gate certain content or modules on your site to members who have purchased access.

Was this article helpful?

Comments

1 comment

  • Comment author
    William de Broucker

    Hello Josh-Lopez,

    Would it be possible to have an attribute ?

    • data-ms-content="has-coupon" - Show content to members in a coupon period

    Thanks a lot

    1

Please sign in to leave a comment.