Button Transition

[SWCmarketing]

Hello!

I hope I’m not over complicating this, but I have a custom button that when clicked expands to show additional information. What I would like to have happen when clicked, is reveal a smooth transition, something like an ease ease with a .2s, instead of the information abruptly displaying. I would also like to include a down arrow next to the read more, and an up arrow next to the collapse after its been clicked. There is some JS included with this, and am wondering if the JS is even needed for what I’m wanting to have done.

The button in question says Read More under the Biography headline. Here’s the link: https://southwesterncoaching.com/nonpartner-coaches-template/

Thanks!
-Mike G.

[ruenel]

Hello Mike,

Thanks for writing in! We have inspected your site and we can see that you added this custom JS code:

function bioTextExpand() {
  var expand = document.getElementById("bioExpand");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("bioBtn");

  if (expand.style.display === "none") {
    expand.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    expand.style.display = "none";
    btnText.innerHTML = "Collapse"; 
    moreText.style.display = "inline";
  }
}

/*
document.getElementById("more").style.transition = "all 2s";
*/

Please be advised that what you have in mind is only possible with more coding. It is already considered custom development and it is beyond the scope of our support. We only cater to getting your site setup, bug fixes, and minor cosmetic changes. You may need a 3rd party developer to accomplish what you want to happen in your site.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Thank you for your understanding.