title: Show only a few users and hide others
body: <p>Can anyone explain how to make a user list like as shown in the image below...
  <a href="https://i.stack.imgur.com/fm9FY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fm9FY.jpg" alt="User list"></a></p>
  
  <p>I'm making a project in Meteor and using Materialize for template and I want to display the list of assigned users. If there are more than a particular count(say 5) of users i want them to be displayed like on that image... I have tried googling this and haven't found anything useful. I also checked the Materialize website and found nothing useful. So if anyone has an idea please help share it.</p>
  
  <p>Ok so this is the output html, in this case i only have one member but in real case I will have more:</p>
  
  <pre><code>&lt;div class="row"&gt; ==$0
  &lt;label class="active members_padding_card_view"&gt;Members&lt;/label&gt;
  &lt;div class="toolBarUsers flex" style="float:right;"&gt;
  &lt;dic class="other-profile" style="background-color:#f06292;"&gt;
  &lt;span&gt;B&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the .js code</p>
  
  <pre><code>Template.profile.helpers({
  randomInitials: function () {
  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var nLetter = chars.charAt(Math.floor(Math.random()*chars.length));
  var sLetter = chars.charAt(Math.floor(Math.random()*chars.length));
  return nLetter + sLetter;
  },
  tagColor: function () {
  var colors = ["#e57373","#f06292","#ba68c8","#9575cd","#7986cb","#64b5f6","#4fc3f7","#4dd0e1","#4db6ac","#81c784","#aed581","#dce775","#fff176","#ffd54f","#ffb74d","#ff8a65","#a1887f","#e0e0e0","#90a4ae"];
  return colors[Math.floor(Math.random()*colors.length)];
  },
  randomAllowed : function(possible) {
      var count = Math.floor((Math.random() * possible) + 1);
      if(count == 1) {
          return;
      }
      return "none";
  },
  
  membersList() {
      const instance = Template.instance();
      const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
      return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId});
  },
  memberData: function() {
      // We use this helper inside the {{#each posts}} loop, so the context
      // will be a post object. Thus, we can use this.xxxx from above memberList
      return Meteor.users.findOne(this.lkp_user_fkeyi_ref);
  },
  showMembers() {
      const instance = Template.instance();
      const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
  
      let membersCount = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
      ////console.log(membersCount);
      if (membersCount &gt; 0) {
          $('.modal-trigger').leanModal(); 
          return true;
      } else {
          return false;
      }
  },
  });
  </code></pre>
  
  <p>Right now if I add a lot of users I get this:
  <a href="https://i.stack.imgur.com/sdETG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sdETG.jpg" alt="This..."></a></p>