Add “Read More” code to member description

Hello,

Follow my steps here –

Step-1 : Copy below css code and then paste in team custom css code (screenshot)

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

Step-2 : Now copy below html code and then paste it in your team description field (screenshot)

<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
  
  <label for="post-1" class="read-more-trigger"></label>
</div>

Note every time when you will use above code then you will need to change “post-1” with your specif unique id for every team member (screenshot) .

Try it and then let me know.

Thanks

• This reply was modified 9 years, 5 months ago by wpshopmart.

Hello Rappi,

Can you please share me your team page url?

Thanks

Hi,

Can you please share me screenshot to describe that which br tag you want to hide from your team section.

Thanks