How to add multiple visibility attributes to the same div block for non-logged-in and trial users or users on specific plans? Answered

• 

  Chukwudi Onyekwere

  • August 10, 2024 16:30

  Hi Gerardo,

  Kindly check out the articles below to see how to set it up correctly.

  1. Show and Hide Individual Elements | data-ms-content
  2. Gated content
  0
• 

  A J

  • August 10, 2024 16:31

  Hey Gerardo Morales,

  I was testing this use-case and it seems adding multiple content IDs to show and hide elements does not work in a way you might want it to. When I tested adding the attribute to show an element for plan A and plan B, it ends up rendering it always irrespective of the plan the customer is in.

  So I guess, the workarounds to solve this would be:

  Approach 1: Clone the element you are trying to show for pro and premium users, assign the individual element the attribute. i.e.

  • data-ms-content = "pro" for one element
  • data-ms-content = "premium" for another element
  • Assuming the gated content ID is pro and premium for your plans
  • Repeat the same for other set of 2 plans

  Approach 2: In case there are many elements you want this use-case to apply for, I understand that this leads to redundant elements which one might want to avoid and in case its too much of manual work, then you can rather create a new gated content setting which essentially enables the common gated content for both Pro and Premium plan users. In this, you can add pages which are common for both the users and ultimately use this content ID, as an attribute for the common elements you want to show for 2 plans. You can do the same for other set of 2 plans as well. I have tested this and it works perfectly.

  

  0
• 

  Gerardo Morales

  • August 10, 2024 16:35

  A J Hey! Thank you very much for taking the time and for your response. It's being very helpful. I tried the first approach. It's on the right track, but if I use the attribute to display the element only to those whose plan is different from Starter, using data-ms-content=!starter, the element is shown to users who are not logged in. I understood that this attribute only worked with logged-in users. I'll try the second approach then

  

  0
• 

  A J

  • August 10, 2024 16:36

  Hey Gerardo Morales, welcome 😇.

  True, negative filters just look at the condition that the user is not assigned that specific plan, so it will show the content for logged out users. So either you could use the plan specific filters or go with the 2nd approach, whatever feels the right fit.

  0
• 

  Mubassir Shaikh

  • June 16, 2025 14:10

  I have a Div block which will be only visible to non loggedin members and users who is on trial period. is it possible to add 2 attribute on same div block?

  0
• 

  Raquel Lopez

  • June 16, 2025 14:11

  No, you will have to create two wrappers. The parent div for non-logged-in members, and the child div for trial-period members.

  0
• 

  Chukwudi Onyekwere

  • June 16, 2025 14:12

  Raquel is right!

  To handle multiple conditions, the typical approach is to use a nested div structure. You can apply one condition to the outer div and the other to the inner div.

  However, in your case, the two conditions you're trying to combine—one for "not logged in" and the other for "trial period" (which requires the user to be logged in)—are actually conflicting. This is because the "trial period" condition assumes the user is logged in, while the "not logged in" condition explicitly excludes logged-in members.

  Either of the conditions may affect the visibility of the div blocks since they're nested. You may need to rethink the logic or resort to using Javascript.

  0
• 

  Mubassir Shaikh

  • June 16, 2025 14:12

  <script>
    document.addEventListener("DOMContentLoaded", async function() {
      const member = await window.$memberstackDom.getCurrentMember();
      const trialBanner = document.querySelector(".trial-banner");    if (trialBanner) {
        if (!member || (member.data.planConnections && member.data.planConnections.some(plan => plan.status === "TRIALING"))) {
          trialBanner.style.opacity = "1";  // Make visible
          trialBanner.style.visibility = "visible";
          trialBanner.style.display = "block"; // Ensure it's displayed
        } else {
          trialBanner.style.opacity = "0";  // Hide banner
          trialBanner.style.visibility = "hidden";
          trialBanner.style.display = "none";
        }
      }
    });
  </script>

  yes tried this with script, its working perfectly, thankyou both

  0
• 

  Chukwudi Onyekwere

  • June 16, 2025 14:14

  Brilliant!👍

  0

Please sign in to leave a comment.