Add a GRID in an accordion

[amdprofi]

hows that possible?

in the accordion element, i need to integrate a “the grid” gallery.
please help me.

[christian]

Hey Uli,

You can insert The Grid’s shortcode in the Accordion Item’s content like in the screenshot below:

Please keep in mind however that it’s generally not recommended to add a Javascript displayed content like the grid inside another Javascript powered interface like tabs and accordions as the timing might not match leaving you with an empty content.

With that said, you might need an additional custom script which will trigger a resize for the grid to recalculate the contents. A sample script can be found in another thread.

@christopher.amirian

Here is the code:

setTimeout(function() {
  jQuery(window).trigger('resize');
}, 1000);

Hope that helps.

[amdprofi]

It only works if the accordion is opened by default.
I have several accordions. in each of these accordions should be some text and THE GRID. but none should be opened by default.

Please help

[christian]

That is expected that’s why I said:

@christian_y

Please keep in mind however that it’s generally not recommended to add a Javascript displayed content like the grid inside another Javascript powered interface like tabs and accordions as the timing might not match leaving you with an empty content.

I then posted a code that will trigger a resize. You will need to expand on that code if that does not work. For example, if you’re using a V2 or non-Classic Accordion, you can expand it like this:

jQuery(function($) {
  $(".x-acc-header").click(function() {
    setTimeout(function() {
      $(window).trigger('resize');
  	}, 1000);
  });
});

If you’re using a Classic Accordion, change .x-acc-header in the code to .x-accordion-toggle. The point there is, you need to time the resize.

What I forgot to say is, this should be done by a web developer. If you don’t have web development knowledge, I’d recommend that you hire a third party developer to implement or modify the code for you.

Thank you for understanding.

[amdprofi]

that worked wonderfully.

I would now like to use the Grid grid in the tabs field. what do I have to set in the js-code?

[christian]

If you’re using a Classic Accordion, try changing .x-acc-header in the code to .x-nav-tabs-item a. The point there is, you need to time the resize.

For v2 Tab, try using .x-tabs-list button

Thanks.