Show and Hide Individual Elements | data-ms-content

Updated August 20, 2026 17:08
14 comments

This article will show you how to do everything listed in the table of contents → If you prefer a video, this 6-minute freemium blog tutorial video will show you how the most common data attributes work. And here's a 5-minute upgrade prompt tutorial video that does basically the same thing.

1) Show content if logged in

data-ms-content="members" → This content is visible when a member logs in… and hidden if they log out. This data attribute works with any Memberstack project.

Pro tip - If you want this content to be default-hidden, you can add the attribute of data-ms-bind:style="display:block" and then hide the element when you're done designing it. If the member has access, Memberstack will set the element to display block. Learn more →

⚠️ Note: We don't recommend using this feature for hiding extremely sensitive information with Memberstack.

2) Show content if logged out

data-ms-content="!members" → This content is visible when a member logs out… and hidden if they log in. It’s handy for hiding elements that are annoying or redundant for logged-in members. For example, you can add data-ms-content="!members" to your signup and login buttons to hide them when a member logs.

This data attribute works with any Memberstack project.

3) Show content if logged in with a plan

data-ms-content="CONTENT-ID" → This content is visible when a member logs in AND has the correct permissions. It’s hidden if they log out or do not have the correct permissions.

The "CONTENT-ID" is automatically generated when you gate content in Memberstack.

This is handy if you want to show or hide elements based on a member’s current plan. I find this especially useful if I have several membership tiers which incrementally unlock more content - and I want to manage access to those memberships via a single dashboard.

You can also reverse this functionality by adding an exclamation mark before the Content ID...

Or you can add data-ms-content="!CONTENT-ID" to ads or up-sell prompts in a dashboard. Once the member has upgraded to the premium plan, there’s no need to display this content any more.

Less Common Use Cases

4) Show content if logged in without plans

data-ms-content="no-plans" — This content is visible only when a member logs in and has no plans attached to their account. It automatically hides if they are assigned to a plan or log out.

When to use this:
Use this attribute if your site allows visitors to create accounts without selecting a plan (for example, open registrations that require admin approval or manual onboarding).

Example: Displaying a "Your account is pending review" banner only to newly registered members who have not yet been assigned a plan.
Reverse it: Add an exclamation mark (data-ms-content="!no-plans") to show content only when a member has at least one active plan of any type.

5) Show content if logged in with free plan(s)

data-ms-content="free-plans" — This content is visible when a logged-in member has an active free plan, and hides if they log out or leave their free plan.

When to use this:
If every non-paying member on your site is assigned to a Free Plan, this single attribute is the simplest way to target them.

Example: Showing an "Upgrade to Pro" banner exclusively to members on your Free Plan, while hiding it from logged-out visitors and active paid subscribers.
Reverse it: Add an exclamation mark (data-ms-content="!free-plans") to hide content specifically from free plan holders.

6) Show content if logged in with paid plan(s)

data-ms-content="paid-plans" — This content is visible only to a member with an active paid plan. It automatically hides if they leave their paid plan or log out.

When to use this:
Use this to display premium content, exclusive downloads, customer support widgets, or subscriber-only navigation links exclusively to paying customers.

Example: Displaying a subscriber-only support chat widget or premium resource library exclusively to active paying members.
Reverse it: Add an exclamation mark (data-ms-content="!paid-plans") to show content to anyone who does not hold a paid plan. (Note: Because !paid-plans will also show to logged-out guests, see Section 7 below if you want to target logged-in members who do not have a paid plan).

7: Combo Option: Target logged-in members who do not have a paid plan

If your site contains a mix of members on free plans and members without any plans attached, neither data-ms-content="free-plans" nor data-ms-content="no-plans" covers both groups simultaneously.

Because data-ms-content="!paid-plans" on its own will also display to logged-out visitors, combine conditions using a nested div wrapper:

[Outer Div Block]   --> data-ms-content="members"    (Hides from logged-out guests)  
      └── [Inner Element] --> data-ms-content="!paid-plans" (Hides from active paid members)        
                 └── Your banner, upgrade CTA, or gated block

Step-by-Step Setup in Webflow:

Add an Outer Div Block: Place a Div Block on your page (e.g., named Gating Wrapper). Add the custom attribute:
- Name: data-ms-content
- Value: members
  (This hides everything inside from logged-out visitors).
Add Your Inner Element: Place your banner, button, or section inside that outer Div Block. Add the custom attribute to the inner element:
- Name: data-ms-content
- Value: !paid-plans
  (This hides the element from any member with an active paid plan).

How the logic resolves:

Logged-out guests: Content Hidden by the outer div (members).
Paid members: Pass the outer div, but the content is hidden by the inner element (!paid-plans).
Free-plan & No-plan members: Pass both checks and see the content.

Was this article helpful?

Didn’t find your answer?

Get an instant answer from Rey, or reach a human. Either way, we’re happy to help.

Ask Rey AI Ask the community Contact support

Comments

14 comments

Oliver Cordingley October 05, 2022 09:31

Does this work with specific customFields? Say I want to display a Div if the user as entered customField A. If customField A is not set then hide element?

0
Josh Lopez Author October 06, 2022 17:21
Hey Oliver,

We do not have a custom field data attribute working like gated content at the moment. You could do this with custom code though using our .getCurrentMember() functionality. Something like:
```
window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
// custom code goes here to show and hide based on the member data
})
```
0
Oliver Cordingley October 07, 2022 23:26

Please can you provide a guide / video / text / to show how we can do that? Thank you!

0
Liam Sorta October 10, 2022 08:24

+1 for having this functionality on custom fields

0
William de Broucker September 19, 2023 14:18

Hello,

Is there an attribute for user having the plan but that cancels at period end ?

thanks

0
Josh Lopez Author September 21, 2023 17:27

Hey William de Broucker 👋
What you describe is the default. If you are getting members canceling immediately try looking at the stripe settings here. Make sure the toggle for "Cancel subscriptions immediately" is not enabled.

0
William de Broucker September 22, 2023 06:53

Hey Josh Lopez,

I handle the cancelation differently on my website (through a webhook) that's why I would like to have an attribute to target the people that cancels at period end.

Thanks,

0
MJ Petroni October 19, 2023 03:58

I'm new to this. Can I add something to make it visible to the public AND people on free plans, but not on paid plans?

0
Duncan from Memberstack October 26, 2023 14:21

Hey MJ 👋 You might try the data-ms-content="!paid-plans"

Elements with that attribute should be visible to everyone EXCEPT people with a paid plan.

1
Bob Lyons November 05, 2024 18:50

Did this functionality change somehow? My goal is to display a menu item only when a user IS LOGGED IN and DOES NOT have access to specific gated content.

Using "data-ms-content="!CONTENT-ID" is continuing to be visible to users who are not logged in. Am I misinterpreting how this is supposed to function?

0
Josh Lopez Author November 05, 2024 22:24

Hey Bob Lyons

Thank you for posting. To help solve this problem we will need some additional info. Can you please provide your app id? If you dont want to send it here you can create a new support ticket and we will be able to dive in and help.

0
Bob Lyons November 06, 2024 15:24

Hi there Josh. I'll go ahead and create a ticket and we can dig in. Certainly possible it's something goofy I have going on. Appreciate you getting back to me here.

0
Sash Margrie Hunt April 28, 2025 00:14
Hey there, I have implemented this feature with buttons and it is working well. However, when using Webflow's CMS pages, I need this feature to be dynamic so that I can show the button based on which CMS Template page is open and which plan the member has. Essentially, the membership plans and the CMS items (pages) should be 'linked' in some kind of dynamic fashion.

Below is an example of the problem I have:
Plans in Member Stack:
- ABC
- DEF
- GHI
Items in Webflow CMS (pages):
- ABC
- DEF
- GHI
For this example, we will assume the Member has the plan ABC.
The problem I have is when I add the "data-ms-content= ABC" to the button on the CMS Template page, if the Member is on the ABC CMS page, then they see the button. However, if the member is on the DEF CMS page they also still see the button even though they don't have the DEF plan.

Is there a way of linking the CMS to the Memberstack plans so that I can have a more dynamic input in the data-ms-content section?

Apologies if I have worded this poorly.
0
Duncan from Memberstack May 01, 2025 19:54

Hey Sash 👋 Do you have any pictures do go along with your explanation? I think I understand.

Would it help if you added the attributes IDs to each CMS item so it was more dynamic? https://www.loom.com/share/0a8f762dd118464e86f7ee5e19475955

0