[Resolved] GPP / Block Elements / Hook / Simple Accordion

[Elvin]

It’s for the additional CSS class(es) of the toggle buttons. 🙂

[Jan]

Hi Elvin,

I’m really sorry for this back and forth.

Meanwhile I added the accordion-toggle-btn to the Additional CSS field of of the buttons.

When I click the accordion button the URL of the page changes to …/page/#toggled-container.

Just wondering if this shouldn’t rather say …/#toggled-container-# ?

Please let me know.

Best,
Jan

[Tom]

Hi there,

I’m seeing a javascript error at the moment.

Try this, instead:

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

for( button = 0; button < toggleBtn.length; button++){
    toggleBtn[button].addEventListener('click',function(e){
        e.preventDefault();
        var target = '#toggled-container-'+button;
        var targetElement = document.querySelector(target);
        targetElement.classList.toggle('show-content');
    });
}

Haven’t tested this method that Elvin is using, but that should at least fix the error and hopefully make things work as he intended.

Let us know 🙂

[Jan]

Hi Tom,

many thanks for stepping in.

I added the revised script which makes accordion #2 work just fine. #1, however, would still not open.

For you orientation, please see screenshot.

I also checked the HTML anchor, CSS classes and related CSS in the Customizer, all of which seem to align with what Elvin suggested.

Any thoughts?

Best,
Jan

[Tom]

The count starts at 0, so try toggled-container-0 instead of toggled-container-1.

[Jan]

Hi Tom,

I’m really sorry for taking this much of your valuable time with this.

The HTML anchors are now named toggled-container-0 and toggled-container-1.

The CSS in the Customizer has been adjusted accordingly:

/* GP Accordion css classes - Referenzen */

#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;
}

I then cleared the server cache and ran a test in a private session with no luck ;-(.

When I hover over the first accordion the URL shows in the status bar at the bottom of the browser is domain.com/page/#toggled-container. Not sure whether this should be specific to the number of the accordion -0 or -1 also.

Any thoughts?

Best,
Jan

[Elvin]

Can we modify the code a bit to do some test?

Can you try this out and let us have a look?

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

for( button = 0; button < toggleBtn.length; button++){
    toggleBtn[button].addEventListener('click',function(e){
        e.preventDefault();
        var target = '#toggled-container-'+button;
console.log(target);
        var targetElement = document.querySelector(target);
        targetElement.classList.toggle('show-content');
    });
}

I can see the code working but the target isn’t coming in properly as it returns this error – https://share.getcloudapp.com/YEuBQGAY

But it’s strange because the content w/ the appropriate ID is clearly there – https://share.getcloudapp.com/jkumYglK

So let’s check if the target is correct. Let us know.

[Jan]

Hi Elvin,

thanks for looking into this. I apologize for the delay, but I have been out sick for a couple of weeks ;-/

Meanwhile, I replaced the code snippet in the Elements Hook, cleared the cache. The accordion will still not open, unfortunately.

Which additional information do you need in order to “check whether the target is correct”?

Regards,
Jan

[Elvin]

Let’s rework the script.

Try this one:

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');
				}
}

Tested it here -http://elvin.wppluginsupport.net/accordion-demo-for-jan/

[Jan]

Hi Elvin,

thanks for getting back instantly.

The new script is working well.

Best,
Jan

[Elvin]

Ah lol yeah you’re right. I was focused on the actual code behavior that I didn’t bother with the styling behavior.

The main issue was the button’s instance iteration wasn’t applying right. The toggle class wasn’t doing what it should as well.

If these 2 worked, its all about .show-content CSS. (I forgot to style the .show-content demo.)

[Jan]

You made my day. Thanks

[Elvin]

No problem. Let us know if you need further help. 😀

[Author]

Posts