Using JavaScript to implement show/hide more details in the field

<ac:structured-macro ac:macro-id="d69a709c-8d46-4a80-bc3f-451e22d98df5" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform1</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="5fb1c0d1-5c36-489d-a94c-2833a50c70e2" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:parameter ac:name="embedded">true</ac:parameter>
      <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
      <ac:rich-text-body>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="39f92f63-7dc1-4c3e-9276-bfd5c053440c" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">hugeta</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Huge textarea field</ac:parameter>
        <ac:parameter ac:name="fieldDescription">max 1000 symbols</ac:parameter>
        <ac:parameter ac:name="type">textarea</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="03b90e65-9ad8-40e3-a8c7-58597024451f" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="condition">hugeta.asCount:&gt;1000</ac:parameter>
        <ac:parameter ac:name="fieldName">We accept only 1000 symbols here</ac:parameter>
        <ac:parameter ac:name="action">Validation rule</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>Showing the contents</p>
<ac:structured-macro ac:macro-id="377bb64c-95db-421d-b853-b0cd05767345" ac:name="confiform-table" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform1</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="6354e4b6-2358-403e-9296-f21319ad343d" ac:name="confiform-field" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">hugeta</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="3d4d8dd2-0381-45e2-ac3f-d48ffaf4d002" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<style>
.morecontent span {
  display: none;
}

.morelink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  margin-top: 20px;
  font-size: 13px;
  color: #ececec;
}

.morelink:after {
  content: '';
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  margin-left: 10px;
  border: 1px solid #ececec;
  border-top: none;
  border-right: none;
  background: transparent;
  transform: rotate(-45deg);
  transform-origin: bottom;
}

.morelink.less:after {
  margin-left: 7px;
  transform: rotate(135deg);
}
</style>
<script>
function showHideText(sSelector, options) {
    // Def. options
    var defaults = {
        charQty     : 100,
        ellipseText : "...",
        moreText    : "Show more",
        lessText    : "Show less"
    };

    var settings = AJS.$.extend( {}, defaults, options );

    var s = this;

        s.container = AJS.$(sSelector);
        s.containerH = s.container.height();

        s.container.each(function() {
            var content = AJS.$(this).html();
            if(content.length > settings.charQty) {

                var visibleText = content.substr(0, settings.charQty);
                var hiddenText  = content.substr(settings.charQty, content.length - settings.charQty);

                var html = visibleText
                         + '<span class="moreellipses">' +
                           settings.ellipseText
                         + '</span><span class="morecontent"><span>' +
                           hiddenText
                         + '</span><a href="" class="morelink">' +
                           settings.moreText
                         + '</a></span>';

                AJS.$(this).html(html);
            }

        });

        s.showHide = function(event) {
            event.preventDefault();
            if(AJS.$(this).hasClass("less")) {
                AJS.$(this).removeClass("less");
                AJS.$(this).html(settings.moreText);

                AJS.$(this).prev().fadeToggle('fast', function() {
                    $(this).parent().prev().fadeIn();
                });
            } else {
                AJS.$(this).addClass("less");
                AJS.$(this).html(settings.lessText);

                AJS.$(this).parent().prev().hide();
                AJS.$(this).prev().fadeToggle('fast');
            }
        }

        AJS.$(".morelink").bind('click', s.showHide);
}
/*------------------------------------------*/

AJS.toInit(function() {
new showHideText('span[cf-field^="hugeta"]', { charQty : 50 });
});


</script>]]></ac:plain-text-body>
</ac:structured-macro>