how to trigger or click this button which uses aria-expanded to display a modal via console

Question

So I tried to use document.querySelector('.d2l-contextmenu-ph').attr("aria-expanded","true"); to basically click the button "hh" button. It doesnt work for me, so can someone explain to me how to click this button which would display the aria-expanded attribute that displays a smaller window with edit properties and delete unit

<div id="propertiesPlaceholderId" class="d2l-placeholder d2l-placeholder-live" aria-live="assertive">
                    <div id="d2l_1_69_681" class="d2l-floating-container d2l-hidden ">
                        <template id="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" class="d2l-contextmenu-template" data-floating-container-id="d2l_1_69_681" data-dropdown-content-id="d2l_1_70_789">
                        <d2l-menu class="d2l-menu-mvc d2l-contextmenu">
                            <d2l-menu-item text="Edit Properties" id="d2l_1_71_946"></d2l-menu-item>
                            <d2l-menu-item text="Delete Unit" id="d2l_1_72_494"></d2l-menu-item>
                        </d2l-menu>
                        </template>
                    </div><h3 class="d2l-heading vui-heading-3 d2l_1_73_408" id="OrgUnitEditorProviders$Plugins`1$PluginView$propertiesHeading">Properties</h3>
                    
          
                <d2l-dropdown-context-menu no-auto-open="" text="Actions for Org Unit Properties" id="d2l_1_74_921" class="d2l-contextmenu-ph d2l-contextmenu-ph-dropdown d2l_1_73_408" data-contextmenuid="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" data-placeholderkey="d2l_1_75_382">
                      
            
            <d2l-button-icon icon="tier1:chevron-down" text="Actions for Org Unit Properties" aria-haspopup="true" aria-expanded="false" type="button" data-js-focus-visible="">
            <button class="d2l-label-text" aria-expanded="false" aria-haspopup="true" aria-label="Actions for Org Unit Properties" id="d2l-uid-22" title="Actions for Org Unit Properties" type="button"> <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down">hh</d2l-icon>
            
            <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down"></d2l-icon>
            
            </button>
            
            </d2l-button-icon>
            
                    </d2l-dropdown-context-menu>
          
          
          <d2l-dropdown-menu no-pointer="" align="start" min-width="200" max-width="370" vertical-offset="12" id="d2l_48_1_419" class="d2l-dropdown-menu-contextmenu" no-auto-focus="" no-padding="" dropdown-content="" opened="" style="--d2l-dropdown-verticaloffset:12px; left: 785.375px;"><d2l-menu class="d2l-menu-mvc d2l-contextmenu" label="Actions for Org Unit Properties" active="" aria-label="Actions for Org Unit Properties" role="menu" style="height: 107px;">
            <d2l-menu-item text="Edit Properties" id="d2l_48_2_483" role="menuitem" tabindex="0" aria-disabled="false" aria-label="Edit Properties" first="true"></d2l-menu-item>
            <d2l-menu-item text="Delete Org Unit" id="d2l_48_3_770" role="menuitem" tabindex="-1" aria-disabled="false" aria-label="Delete Org Unit" last="true"></d2l-menu-item>
        </d2l-menu></d2l-dropdown-menu>

Answer 1

I was trying to do the same but wasn't successful with triggering a click event as the event function is not loaded at the time of the trigger. I'd love to see the workaround someone has to have figured out but have not found anything working as of yet

I'm using Bootstrap 5 but this is what I ended up doing and while it doesn't invoke an event it does display the panel as intended.

$("#IDOfCollapsePanel").addClass('show');

So if you'd like to do the same based on the aria-controls you would

$("[aria-controls='nameofcontrol'").addClass('show');

Or

$("[aria-expanded='true'").addClass('show');