Showing/Hiding Content with Data Attributes

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.