[Resolved] Accordion funtion.

[Jusung]

I guess this is out of scope.
I just want to modify the myaccount page by using accordion.

I found this code
But this code only works for the next element.
when I click the image, I wanna show the myaccount content.
Could I know how I can modify this code to make it work if this is not out of scope?
On the image, I added the link for my account, order, address.

function thisbit_accordion_script() { ?>
<script id="toggler">

// Run function after DOM has loaded.
window.addEventListener("DOMContentLoaded", (event) => {
  // target all the trigers and store them as array.
  const buttons = Array.from(document.querySelectorAll(".click-me"));

  // Handle the state changes.
  function toggle(triggers) {
    const handleClick = (event) => {
      event.preventDefault(); // If actually a button or a link
      event.currentTarget.classList.toggle("toggled");
      event.currentTarget.nextElementSibling.classList.toggle("open");
    };

    // Run the function on select elements.
    const clicker = buttons.forEach((element) => {
      element.addEventListener("click", handleClick, false);
    });
    return clicker;
  }
  // Do the toggling.
  toggle(buttons);
});
</script>
<?php }
add_action( 'wp_head', 'thisbit_accordion_script');

function thisbit_accordion_style() { ?>
<style id="gb-accordion-style">
.click-me {
  cursor: pointer;
  user-select: none;
}	
.click-me:hover,
.click-me.toggled {
  color: #5b5b5b;
}	
.click-me .gb-icon {
	transform-origin: center;
	padding-right: 0 !important;
	transition: all 0.5s ease;
}
.click-me:hover .gb-icon,
.click-me.toggled .gb-icon{
	color: #5b5b5b;
	transform: rotate(-90deg);
}	
.click-me .gb-headline-text {
	padding-left: 1em;
}
.click-me + * {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all 0.5s ease;

}
.click-me + .open,
.click-me + .open * {
	opacity: 1;
	height: min-content;
	}
</style>
<?php }
add_action( 'wp_head', 'thisbit_accordion_style');

[Fernando]

Hi Jusung,

Where did you get this code? I don’t think that code would work for what you’re trying to do. You’ll need to find a way to pre-load content on other pages of your Account page and then build the accordion.

That code only creates an accordion. If you’re looking for just an Accordion, you don’t need a code for that. It already exists in the upcoming update. See here: https://generateblocks.com/flexbox-sizing-tabs-accordions-more/

But, then again, this won’t work for what you’re trying to do since you’re trying to load the content of different pages and then implement them in an Accordion.

[Jusung]

Can I download it now and use it?

[David]

Hi there,

if you have a GenerateBlocks Pro license then yes, you can download GB Pro 1.5 and GB Free 1.7 from your GenerateBlocks account. It requires latest versions of both plugins
It is currently in the final release candidate phase, and we intend to go live with the updates next Tuesday, so we don’t expect any changes between now and then

[Jusung]

I am a little confused.

I have gp premium I am currently using.

GenerateBlocks pro is something different?
And to use the new function, I must pay for generateblocsk pro right?

[Jusung]

I just saw the pricing and it is only for 1 year.
There is no option for more years?

If I buy personal for 1 sites, I can use it for only 1 sites.
and If I stop using it on the site, can I use it on another site?

[David]

I just saw the pricing and it is only for 1 year.
There is no option for more years?

There is only an annual subscription that auto renews each year.

If I buy personal for 1 sites, I can use it for only 1 sites.
and If I stop using it on the site, can I use it on another site?

Yes. But only the site with the active license will receive updates.

[Author]

Posts