How to hide/show page content (using data attributes) in Webflow

MemberSpace makes it easy to hide entire pages of your website via products. We also make it easy to upload and protect specific media via Content Links.

However, there are situations where you want to hide/show entire sections or specific elements of a page depending on various factors e.g. Is the user logged in? Are they on Plan A? Are they a free or paid member?

With MemberSpace's data attribute functionality, you can accomplish exactly that!

Here is our developer help doc, but below we'll give a few simple examples you can follow.

• Say you want to show an up-sell button only for free members encouraging them to join a paid plan. To do that, add the following data attribute to the button:

  data-ms-show="free"

• Say you want to hide a signup banner image so only visitors who are NOT logged in see it. To do that, add the following data attribute to the banner image:

  data-ms-hide="auth"

• Say you want to hide an external link for members on a specific plan (e.g. plan id 111). To do that, add the following data attribute to the link:

  data-ms-hide="plan(111)"

Adding data attributes to elements on a Webflow site

You can add data attributes to any element on your Webflow website by following the below steps.  In this example, we'll edit existing elements in the top navigation. 

1. Make sure you are logged into your Webflow backend.

2. Edit your site > click any element to display the settings on the right > click Settings at the top.

   
   

   

   
   
3. Next, click the + icon under Custom Attributes > fill in the data attribute Name and Value fields. In this example, we'll choose to hide the "Member Login" button from members who ARE logged in but show it to website visitors who are NOT.

4. After, be sure to publish your changes at the top.

   
   

   

   
   

   Now, when a website visitor is NOT logged in, they will see the "Member Login" button at the top.

   
   

   

   
   

   However, if the visitor IS logged in to their MemberSpace account, the button will be hidden.

   
   

   

   
   

5. Next, we'll edit an "Existing Member" button so it will be hidden from visitors who are NOT logged in but shown to members who ARE. 

   
   

   Repeat the above steps.  However, for Step 3, we'll slightly alter the data attribute.

   
   

   

   
   

   Now, when a member IS logged in, they will see the "Existing Member" button at the top.

   
   

   

   
   

   However, if the website visitor is NOT logged in to their MemberSpace account, the button will be hidden.