It's work, but in my case, I have 4 Accordions and it just effect on the first accordion!

What should I do to resolve my problem? :(

Hi Hoai,

For the mentioned use-case, I have created a sample app 

Traditional web app -> Sample App | AccordionTask

Reactive web app ->  https://www.outsystems.com/forums/discussion/66177/reactive-accordion-item-onclick-triggered/#Post262575

Please follow the below-mentioned implementation steps.

Steps to follow

1. Create a web block to encapsulate custom JavaScript code to restrict the accordion header onclick expand/collapse functionality
2. Introduce the respective web block in the screen footer placeholder section
3. Add the custom class which is referred in the JS code to all the HTML elements Style Classes property (as shown in the below image) which are placed/defined in the accordion header placeholder. i.e. in our case, it is  select all checkbox element

JavaScript defined within the Web block

•  Below mentioned JavaScript code is used as the Expression widget (set Escape Content property to No) value within the refered web block.

JavaScript Snippet

"<script>

  (() => {
        let customCheckBoxes = document.querySelectorAll('.jsClass');

        customCheckBoxes.forEach(customCheckBox => {
            customCheckBox.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });    
    
    })();

</script>"

Hope this helps you!

Kind regards,

Benjith Sam

Hi Benjith Sam,

You are the best. I almost give up using the widget and to create my own. But your solution solved my issue. Thank you.