Customizer / CSS accordion / block display

Hi there,

I'm using the following CSS in the Customizer to set up an accordion manually.

/* GP Accordion css classes (multiple) */

#toggled-container-0 {
display: none;
}

#toggled-container-1 {
display: none;
}

#toggled-container-0.show-content{
display: block !important;
}

#toggled-container-1.show-content{
display: block !important;
}

In addition, I have set up an Elements Hook to inject the relevant script:

<script>

let toggleBtn = document.querySelectorAll(".accordion-toggle-btn");

for( button = 0; button < toggleBtn.length; button++){
		let buttonInstance = button;
				toggleBtn[buttonInstance].addEventListener('click', function(e){
				e.preventDefault();
				
				console.log(buttonInstance);
				accordion_func(buttonInstance);	
			}, false );	
}

function accordion_func(button){     
        var target = '#toggled-container-'+button;

        var targetElement = document.querySelector(target);
	
				console.log(target);
        if ( !targetElement.classList.contains('show-content') ){
						targetElement.classList.add('show-content');
				} else {
						targetElement.classList.remove('show-content');
				}
}

</script>

The hiding part of the CSS is working well. The expand- or display: block -part, however, is not.

Any thoughts on how to resolve that are much appreciated.

This is how you get to the accordion that is embedded into the result of a quiz.

Thanks,
Jan