How to expand and collapse a div made using aria-expanded attribute?

I am basically trying to write a script that could expand a collapsed <div> using JavaScript. While using the frontend part, I can collapse and expand that <div> just by clicking on that but when it comes to JavaScript, it’s not working if I try element.click() or even element.ariaExpanded = "true".

I am attaching the code for before and after click on that <div> highlighting the differences in the code.

Before Clicking on <div> Element in Frontend

After Clicking on <div> Element in Frontend

I tried several things including

var outerDiv = document.getElementsByClassName("section--section--BukKG");
outerDiv[0].ariaExpanded = "true";
outerDiv[0].children[0].ariaExpanded = "true";
outerDiv[0].click();
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.remove('udi-angle-down');
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.add('udi-angle-up');

Answer

As you did not include any HTML markup the following is a rough facsimile of the original. You are essentially trying to toggle the visibility of the DIV elements and indicate, using ARIA tags, that the element is or is not expanded

To that end you can make use of the aria-expanded attribute in CSS to govern the visibility of the child objects within the parent container. By setting the attribute aria-expanded as either true or false will then invoke the relevant css rule to display/hide the children.

const bool=(v)=>v=='true' ? true : false;

const clickhandler=function(e){
  this.setAttribute('aria-expanded', !bool(this.ariaExpanded) )
}

document.querySelectorAll('div.section--section--bukkg').forEach(div=>div.addEventListener('click',clickhandler) );
.section--section--bukkg{
  transition:ease-in-out 250ms all;
  border:1px solid red;
  padding:1rem;
  margin:1rem;
}

[aria-expanded="false"] .section--section--heading{
  display:none;
}
[aria-expanded="true"] .section--section--heading{
  display:block;
}
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=0 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 1</div>
    <span class='section-chevron'>Some content in a SPAN 1</span>
    <div class='font-text-xs'>teeney weeney text 1</div>
  </div>
</div>

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=1 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 2</div>
    <span class='section-chevron'>Some content in a SPAN 2</span>
    <div class='font-text-xs'>teeney weeney text 2</div>
  </div>
</div>

<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
  <div class='section--section--heading' role='button' tabindex=2 data-purpose='section-heading'>
    <div class='section-title' data-purpose='section-panel'>A title of some sort 3</div>
    <span class='section-chevron'>Some content in a SPAN 3</span>
    <div class='font-text-xs'>teeney weeney text 3</div>
  </div>
</div>