[Code] Display or Hide Elements Based on Custom Fields

Article author
Duncan Hamra

Display Element If Custom Field Is Set

Check if a member has filled out a custom field. If yes, set the target element to display.

You can also do the inverse. Check if a member has filled out a custom field. If yes, remove the target element from the page.

 

Similar Articles

Lock Pages & Folders with Gated Content → 

Display an element based on Plans and Gated Content →

Display and element based on Metadata →

Display and element based on Free Trials →

Keywords: Gated content attributes, hidden content attributes, show/hide, show element, hide element, visibility

Was this article helpful?

Comments

9 comments

  • Comment author
    Chuck Lapointe

    Hi Duncan-Hamra

    There's a bug with your example here:

    window.$memberstackDom.getCurrentMember().then(({ data: member }) =>
      { if (member && member.customFields["favorite-color"] == null) {
        const elem = document.getElementById('favoriteColor')
        elem.style.display='none';
      }
    });

     

    The null doesn't actually work, I had to replace it with "".

     

    1
  • Comment author
    Duncan Hamra

    I let the team know 🤔 Will get this tested ASAP. 

    0
  • Comment author
    Nicholas Platt

    Hey Duncan, 

    I was wondering if you could also put an example of how to set this up here as well. 

    Best,

    Nicholas

    2
  • Comment author
    Duncan Hamra

    Great suggestion! Yes, I'll see what we can do 😁

    1
  • Comment author
    Nicholas Platt

    Hey Duncan-Hamra, Hope you're doing well. I was wondering if there was any update on this as well. 

    I am also having trouble with this code.

    1
  • Comment author
    Duncan Hamra

    Video pending 👍 Nicolas Scott is working on it for us 🙏

    1
  • Comment author
    Nicholas Platt

    Hey Nicolas Scott, I was wondering if there was any update on this?

    0
  • Comment author
    Nicholas Platt

    Hey Duncan-Hamra, checking in on this. 

    0
  • Comment author
    Ian Taylor

    Nicholas Platt I had the same issue and ended up finding an easier way.

    Just assign a custom attribute to the webflow elements you want to conditionally show based on a ms-custom field value. So in my case I have two elements with attributes of data-cohort=1 and data-cohort-2.  Then just use this snippet below which just loops through the page and shows the elements that match my custom field which has matching values of 1 or 2. Granted it's simple criteria but works perfectly. 

    <script>
      window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
        if (member && member.customFields) { 
          let cohort_value = member.customFields["cohort"]
          const rows=document.querySelectorAll('[data-cohort]');
          rows.forEach(item => {
            if (item.getAttribute('data-cohort') !== cohort_value){ item.style.display="none";}
          })
        }
      });
    </script>

    0

Please sign in to leave a comment.