Showing and Hiding Elements on a Page in Webflow

Article author
Josh Lopez

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.

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 → 

Conditionally Display An Element Based on Metadata → 

Was this article helpful?

Comments

4 comments

  • Comment author
    Oliver Cordingley

    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
  • Comment author
    Josh Lopez

    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
  • Comment author
    Oliver Cordingley

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

    0
  • Comment author
    Liam Sorta

    +1 for having this functionality on custom fields 

    0

Please sign in to leave a comment.