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 8 years, 3 months ago by wpshopmart.

And now solution for add external link (Read more link) in team description filed

Add below code in your team description filed –

<br />
<a href="your link" target="_blank">Read More</a>

Let me know if you will get any problem.

Thanks

Hi.

Great solution but I have a blank area before I click on Show more.
After the click, the blank area fills with the text.
But I want to show the button without the blank area.
Is this possible?

It will be great, when the “Show more” can be disabled / enabled by the plugin.

Rappi

I have found the reason but no solution.

When I have this in the description

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

<strong>Qualifikationen:</strong>
<br />
Sachkunde § 11 Tierschutzgesetz Hunde, Katzen und Kleintiere<br /> 
Sachkunde § 10 Anlagehunde<br />
Seminare und Schulungen<br />
Erste Hilfe am Hund<br />
Mittelmeerkrankheiten<br />
Impfungen<br />
Hundetransporte
</span></p>
  
  <label for="post-1" class="read-more-trigger"></label>
</div>

every br tag is always showing. The hidden css don’t work with br tags and li tags doesn’t work too.

Any solution?

Rappi

Hello Rappi,

Can you please share me your team page url?

Thanks

Hi and happy new year.

Under this url you can see it: https://zeige-meinen-entwurf.de/warsteiner/der-verein/unser-team/

At the first member (Tanja Schannath) you see many spaces before the more-button.

I have updated your plugin to the latest version 1.1.5

Rappi

I have found a solution!

Insert

.read-more-target br {
display: none;
}

to css and the br tag don’t show.

Rappi

Sorry.

No solution ??

Now the br tags don’t show anymore….

Hi,

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

Thanks