JavaScript: Раскрывающийся по клику блок

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
(function($) {

  $.fn.iComputerSlide = function(options) {

    options = $.extend({
      height: 200,
      btnClose: "Close",
      btnOpen: "Open"
    }, options);

    makeWrap = function($element, options) {
      return '<div class="io_item">' +
        '<div class="io_item_wrap" style="max-height:' + options.height + 'px">' + $element[0].outerHTML +
        '<div class="io_trans"></div>' +
        '</div>' +
        '<div class="io_button_wrap">' +
        '<a class="io_button btn_close">' + options.btnClose + '</a>' +
        '<a class="io_button btn_open">' + options.btnOpen + '</a>' +
        '</div>' +
        '</div>';
    };

    $(document).on("click", ".io_button", function() {
      $(this).parents(".io_item").toggleClass("open");
    });

    return this.each(function() {
      var $element = $(this);
      $element.replaceWith(makeWrap($element, options));
    });
  };
})(jQuery);

$(function() {

  $(".item_text").iComputerSlide({
    height: 150,
    btnClose: "Свернуть",
    btnOpen: "Читать"
  });
});
</script>


<div class="text_hide_wrap">
  <div class="item_text">
    <p>Все говорят: не делись, не делись. Терпи, а не расходись. Что поделился, то разорился. Так и старики говорят,
      в старину не делились — богаче жили; так и мир судит, чтобы больше двойников или тройников было; было бы
      кому мирское дело потянуть; так и господа начальство судят. Особенно старые господа. Как кто делиться
      вздумает, посекут обоих, да и велят опять вместе жить. А опять придешь, опять то же будет.</p>
    <p>А настоящее дело, другой раз дележ баловство, а другой раз не миновать делиться, брату ли с братом или отцу с
      сыном. Что больше вместе жить, то греха больше. Все больше от баб, говорят, дележ бывает. Другой раз и не от
      баб, да не миновать делиться. Так-то с Сергеем Резуновым было.</p>
    <p>Остался Сергей после отца сиротой, всего годочков 6 от роду. Прозвище его настоящее Трегубой; так его отца
      звали, а уж Резуновым он по вотчиму называться стал. Отчего Трегубой помер, бог его знает; говорили старухи
      умные (они все знают, старухи), говорили, что его в Саламатине баба испортила, только не верю я что-то
      бабам, а должно, простудился, горячка или другая болезнь от бога была. Мужик он был одинокой, бедный,
      остались после него молодайка-вдова, да трое сирот, Сережка да две девочки. И помер-то в самое голодное
      время перед осенью. Хоть по миру иди. Спасибо, господские были, хоть плохи-плохи, а сходила к приказчику,
      велел...</p>
  </div>
</div>


<style>
.item_text {
  width: 100%;
  padding: 20px;
}

.item_text p {
  margin-bottom: 20px;
}

.io_item {
  width: 100%;
  padding-bottom: 20px;
}

.io_button_wrap {
  text-align: center;
  margin-top: 10px;
}

.io_button {
  display: inline-block;
  border: 1px solid #f00;
  width: auto;
  padding: 0 20px;
  line-height: 32px;
  vertical-align: top;
  text-transform: uppercase;
  color: #f00 !important;
  font-size: 10pt;
  border-radius: 22px;
  cursor: pointer;
}

a.io_button:hover {
  text-decoration: none;
}

.io_item .btn_close {
  display: none;
}

.io_item .btn_open {
  display: inline-block;
}

.io_item.open .btn_close {
  display: inline-block;
}

.io_item.open .btn_open {
  display: none;
}

.io_trans {
  width: inherit;
  position: absolute;
  height: 80px;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(61, 61, 61, 1) 100%);
  transition: 1s;
}

.io_item.open .io_trans {
  height: 0;
  transition: 1s;
}

.io_item_wrap {
  position: relative;
  overflow: hidden;
  max-height: 100px;
  width: inherit;
  transition: max-height 0.5;
}
.io_item.open .io_item_wrap {
  max-height: 999px !important;
  transition: max-height 1s;
}
</style>