Showing and Hiding Elements on a Page in Webflow

Article author
Josh Lopez
  • Updated

This article will show you how to do everything listed in the table of contents →
If you prefer a video, this 5-minute tutorial video will show you how the most common data attributes work.

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.

⚠️ Note: If Memberstack fails to load, the content will not be hidden. We don't recommend using this feature for hiding extremely sensitive information with Memberstack.


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.


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

Show content if logged in without plans

data-ms-content=”no-plans" → This content is visible when a member logs in but does not have any plans… and hidden if they log out or join a plan.

It’s handy for showing elements that are useful before someone’s account is approved, the purchase is complete, etc.

This data attribute works with any Memberstack project. Add a “!” to reverse its functionality.


Show content if logged in with free plan(s)

data-ms-content=”free-plans → This content is visible when a member with a free plan logs in… and hides if they log out or leave their free plan.

This data attribute works with any Memberstack project. Add a “!” to reverse its functionality.


Show content if logged in with paid plan(s)

data-ms-content=”paid-plans → This content is visible when a member with a paid plan logs in… and hides if they log out or leave their free paid plan.

This data attribute works with any Memberstack project. Add a “!” to reverse its functionality.


Next Steps

Lock Pages & Folders with Gated Content → 

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.