Hide/Show Content Description Text

Hi! I'm looking for a way to hide/expand a long description within a content item's description on our team's reviews page. I've found code for expanding FAQs and accordion style, but not within a text block like this. Ideally, I'd like to make the large chunk of text show only the first paragraph and then expand if the reader would like to read more. Thanks!

Hi,

Can you share link to this page? We can check easier

I used to do this similar with List Section Simple

Sorry! I didn't have notifications on - the site is https://it.fscj.edu/shout-outs.

Thanks!!

I used to do similar with List Section, my ideal is to add this

the add this code to Page Header Code Injection to enable more info when users click Read Bio text

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $('li.list-item').each(function(i, e) {
      $(this).click(function() {
  $(this).toggleClass('tp-list-des-open');
});
 })
});
</script>
<style>
.list-item-media:hover, h2.list-item-content__title:hover {
    cursor: pointer;
}
  .list-item-content__description {
    height: 0;
    overflow: hidden;
    transition: all 0.1s ease;
}
  .tp-list-des-open .list-item-content__description {
    height: 100%;
    transition: all 0.1s ease;
}
  h2.list-item-content__title:after {
    content: "Read Bio";
    display: block;
    font-size: 14px;
    font-style: italic;
    margin-top: 20px;
}
  .tp-list-des-open h2.list-item-content__title:after {opacity:0;}
</style>