Content resize on modal open

[RinardMedia]

Hello there! I’m trying to setup a new team page for our company website. Basically, I have a full width column that I’d like to resize to 50% when a modal is toggled on, and vice versa. I am still new to JS, and I’m not sure at this point what the issue could be. This is the code I’m using already (That isn’t working):

const bioColumn = document.getElementById('bio-row').getElementsByClassName('bio-column');

document.getElementsByClassName('x-anchor-toggle bio-modal').onclick = widthToggle;
  
function widthToggle() {
  if (bioColumn.classList.contains('bio-width')){
    bioColumn.classList.remove('bio-width');
  }
  else {
    bioColumn.classList.add('bio-width');
  }
}

Is there an easier way to accomplish this?
Here is a link to the page I’m editing this on: https://wordpress-669672-2268259.cloudwaysapps.com/ashleys-test-page/

[ruenel]

Hello @RinardMedia,

Thanks for writing in! Be advised that this is beyond the scope of our support under our Support Policy. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.