Employee text part collapsible

How can I make the text of the employee section collapsible, so its collapsed and you can extend it with an arrow or something (and keep it mobile /responsive compatible).

So you in first sight only see the title and employee info?!

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      if( $('.employees-area').length ) {

        $('.employee-desc').wrapInner('<div class="empoyee-desc-inner"></div>');
        $('.employee-desc').prepend('<div class="expand-employee-desc"><i class="fa fa-arrow-down"></i></div>');
        $('.empoyee-desc-inner').css('display', 'none');

        $( '.expand-employee-desc' ).click(function() {
          $(this).next('.empoyee-desc-inner').slideToggle('slow');
        });

      }

    });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .expand-employee-desc {
      text-align: center;
      padding: 5px 0;
      margin-bottom: 5px;
      cursor: pointer;
    }

Afterwards you may need to flush any applied cache, as it usually blocks new code addition from taking effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Perfect, thats workable. Is there also a way i can show only the first 2 or 3 sentences. And when they press the arrow they see the whole text?