readmore/readless #accordian #button #effect

css

.container__accordian{
    display: none;
}

html

<a href="#mo-solutions" class="ui-button__expand ui-button__expand--black-white mo__expand-button" id="expand-mo-solutions" title="read more"><?php get_template_part('buttons/button', 'expand'); ?></a>

<div class="container__accordion mo__accordian" id="mo-solutions">

<div class="mo__diagram-copy">I begin every project with four simple words &mdash;what is your objective.It doesn't matter if it's stunning or cutting-edge if it doesn't solve your problem.</div>

</div>

js

jQuery(document).ready(function($) {
  $('#expand-mo-solutions').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');
    
     if ($(id).is(":visible")) {
       $(this).text("Read More");
   } else {
       $(this).text("Read Less");
   }

  $(id).slideToggle(500);
})
});