Always show List Block Action Buttons

Ask the community
1

Heya! I’m trying to get the “expand” click action to automagically trigger on a “List with horizontal sliding cards” block.

I’ve tried to send the click() event manually after the block loads, and it logs in the console, both when it loads, and also when I click the Mui-box element, but for some reason won’t actually trigger the collapsed Button panel to expand.

I’ve tried the solution from this thread: Request: header with categories BY DEFAULT EXPANDED - #6 by matthieu_chateau

I modified the line:
document.querySelectorAll(“MuiAccordion-root”) to look for MuiBox-root (which is what I found to be the container on the Firefox Inspect Element thingy)

I also found the specific “click” event attached to the <div> in the Inspector, disabled it, and got it to stop expanding/collapsing on click.

I feel like I’m missing something obvious, or more accurately that I’m trying to trigger a click event when what I really need to do is just set the list block to be ‘expanded’ somehow without even involving the event handler.

<script>
window.addEventListener('block-loaded-currentjobbutton', () => {
    console.log("block loaded");
  const accordionElements = document.querySelectorAll(".MuiBox-root");
  console.log(accordionElements);
  accordionElements.forEach((element) => {
    const button = element.querySelector('div[role=button]');
    console.log(button);
    if (button) {
      button.click();
    }
  });
});
</script>

//And here was another attempt, the console log from this snippet is in the attached image

<script>
window.addEventListener('block-loaded-currentjobbutton', () => {
    console.log("loaded currentjobbutton") 

    const clickbox = document.getElementById('currentjobbutton');
    clickbox.addEventListener('click', () =>{
        
        console.log("clickbox clicked")
    })
    clickbox.dispatchEvent(new Event('click'));
    
});
</script>


* List item

softrbuttonproblem
softrbuttonproblem1395×1067 194 KB

2

Hay @BenWyatt ,
can you please try the code below?

<script>
window.addEventListener('block-loaded-BLOCKID', () => {
    setTimeout(() => {
        let listItems = document.querySelectorAll('#BLOCKID .horizontal-list-item');
         [...listItems].forEach((item) => {item.click();})
    }, 50)
})
</script>
1 Like
3

Had to play with the timeout and extend to a full second, but that worked! Thank you so much!
Here’s the snippet with the timeout as 1000 for posterity.

<script>
window.addEventListener('block-loaded-BLOCKID', () => {
    setTimeout(() => {
        let listItems = document.querySelectorAll('#BLOCKID .horizontal-list-item');
         [...listItems].forEach((item) => {item.click();})
    }, 1000)
})
</script>

How was it that you identified that a ‘.horizotal-list-item’ was the object? Are they listed in the CSS? a <div> in the html?

4

I checked in the code to find the element that is listening to the click event :smiley: