[Support request] Customizer / CSS accordion / block display

[Jan]

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

[David]

Hi there,

the script isn’t doing anything, its probably because the script is fired when the page is loaded.
So the first line of the code:

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

That gets the toggleBtn never finds the .accordion-toggle-btn as it has not been loaded yet.

Hook the script in using a HTML block after your Accordion, so its loaded after the HTML is.

As an aside, GenerateBlocks Pro 1.5 is in Alpha with GB 1.7 – and it has built in Accordion ( and Tab ) blocks 🙂

[Jan]

Hi David,

thanks for shedding some light 😉

I’ll hook the script in as suggested and let you know accordingly.

GB Pro sounds promising. I added this to my review list 😉

Best,
Jan

[David]

You’re welcome

[Author]

Posts