Create section customized problem

Hi there,

it would take some custom work, not sure if i can assist here, but first off – the image, is a CSS background image an option or must it be an <img> block ?

Just trying to assess the complexity and whether Javascript is required.

If it’s a background image, it might be doable with CSS.

Can you try this structure and add the highlighted text as the additional CSS class to the blocks?
https://app.screencast.com/hJTvmtaOqRNBx

Once that’s done we can take another look.

Theres a few hurdles to jump over here.
I would use this structure:

https://app.screencast.com/ApDjxpVwjtstP

And here is the block HTML for that, you can switch the editor to the code editor, and paste it in and then return to the visual editor:

<!-- wp:generateblocks/container {"uniqueId":"afe61157","isDynamic":true,"blockVersion":4,"blockLabel":"Relative Parent","position":"relative"} -->
<!-- wp:generateblocks/container {"uniqueId":"21677a7b","isDynamic":true,"blockVersion":4,"useGlobalMaxWidth":true,"spacing":{"marginRight":"auto","marginLeft":"auto"}} -->
<!-- wp:generateblocks/container {"uniqueId":"4d9c0c19","isDynamic":true,"blockVersion":4,"variantRole":"accordion","sizing":{"width":"50%"},"accordionTransition":"slide"} -->
<!-- wp:generateblocks/container {"uniqueId":"200de928","isDynamic":true,"blockVersion":4,"variantRole":"accordion-item","useTransition":true,"transitions":[{"state":"normal","target":"accordionContent","customSelector":"","timingFunction":"ease","delay":"","property":"max-height","duration":0.25}],"accordionItemOpen":true,"accordionTransition":"slide"} -->
<!-- wp:generateblocks/button {"uniqueId":"4558ff5b","blockVersion":4,"variantRole":"accordion-toggle","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"space-between","columnGap":"0.5em","sizing":{"width":"100%"},"typography":{"textAlign":"left"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","backgroundColorHover":"#ffffff","backgroundColorCurrent":"#fafafa","textColor":"#000000","textColorHover":"#222222","textColorCurrent":"#000000","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconStyles":{"width":"0.8em","height":"0.8em"},"accordionItemOpen":true} -->
<button class="gb-button gb-button-4558ff5b gb-accordion__toggle gb-block-is-current"><span class="gb-button-text">Accordion title</span><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" ariahidden="true" role="img" class="gb-accordion__icon"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" ariahidden="true" role="img" class="gb-accordion__icon-open"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" fill="currentColor"></path></svg></span></button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/container {"uniqueId":"069f913d","backgroundColor":"#fafafa","isDynamic":true,"blockVersion":4,"variantRole":"accordion-content","spacing":{"paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","marginBottom":"20px"}} -->
<!-- wp:paragraph -->
<p>Accordion content.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/container {"uniqueId":"11cb370d","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/600"}},"isDynamic":true,"blockVersion":4,"blockLabel":"accordion background","className":"accordion-bg"} /-->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"2c2e6a88","isDynamic":true,"blockVersion":4,"variantRole":"accordion-item","useTransition":true,"transitions":[{"state":"normal","target":"accordionContent","customSelector":"","timingFunction":"ease","delay":"","property":"max-height","duration":0.25}],"accordionTransition":"slide"} -->
<!-- wp:generateblocks/button {"uniqueId":"61727514","blockVersion":4,"variantRole":"accordion-toggle","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"space-between","columnGap":"0.5em","sizing":{"width":"100%"},"typography":{"textAlign":"left"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","backgroundColorHover":"#ffffff","backgroundColorCurrent":"#fafafa","textColor":"#000000","textColorHover":"#222222","textColorCurrent":"#000000","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconStyles":{"width":"0.8em","height":"0.8em"}} -->
<button class="gb-button gb-button-61727514 gb-accordion__toggle"><span class="gb-button-text">Accordion title</span><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" ariahidden="true" role="img" class="gb-accordion__icon"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" ariahidden="true" role="img" class="gb-accordion__icon-open"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" fill="currentColor"></path></svg></span></button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/container {"uniqueId":"bf5a53db","backgroundColor":"#fafafa","isDynamic":true,"blockVersion":4,"variantRole":"accordion-content","spacing":{"paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","marginBottom":"20px"}} -->
<!-- wp:paragraph -->
<p>Accordion content.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/container {"uniqueId":"bf269f67","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/137/600"}},"isDynamic":true,"blockVersion":4,"blockLabel":"accordion background","className":"accordion-bg"} /-->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"927d90cb","isDynamic":true,"blockVersion":4,"variantRole":"accordion-item","useTransition":true,"transitions":[{"state":"normal","target":"accordionContent","customSelector":"","timingFunction":"ease","delay":"","property":"max-height","duration":0.25}],"accordionTransition":"slide"} -->
<!-- wp:generateblocks/button {"uniqueId":"e0867fd7","blockVersion":4,"variantRole":"accordion-toggle","buttonType":"button","display":"flex","alignItems":"center","justifyContent":"space-between","columnGap":"0.5em","sizing":{"width":"100%"},"typography":{"textAlign":"left"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#ffffff","backgroundColorHover":"#ffffff","backgroundColorCurrent":"#fafafa","textColor":"#000000","textColorHover":"#222222","textColorCurrent":"#000000","hasIcon":true,"iconLocation":"right","iconPaddingRight":"","iconStyles":{"width":"0.8em","height":"0.8em"}} -->
<button class="gb-button gb-button-e0867fd7 gb-accordion__toggle"><span class="gb-button-text">Accordion title</span><span class="gb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" ariahidden="true" role="img" class="gb-accordion__icon"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" ariahidden="true" role="img" class="gb-accordion__icon-open"><path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" fill="currentColor"></path></svg></span></button>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/container {"uniqueId":"13342251","backgroundColor":"#fafafa","isDynamic":true,"blockVersion":4,"variantRole":"accordion-content","spacing":{"paddingTop":"20px","paddingRight":"20px","paddingBottom":"20px","paddingLeft":"20px","marginBottom":"20px"}} -->
<!-- wp:paragraph -->
<p>Accordion content.</p>
<!-- /wp:paragraph -->

<!-- wp:generateblocks/container {"uniqueId":"95598d5c","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/337/600"}},"isDynamic":true,"blockVersion":4,"blockLabel":"accordion background","className":"accordion-bg"} /-->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

The main points:

1. the top Relative Parent Container block has its Layout > Position set to Relative

2. in each of the Accordion Item > Accordion Content containers is the a Container Block with the background image. And that block has a CSS class of: accordion-bg

Now add this CSS to the site:

.accordion-bg {
    position: absolute;
    inset: 0 0 0 50%;
    opacity: 0;
}
.gb-accordion__item-open > .gb-accordion__content  .accordion-bg {
    opacity: 1;
}

What it does is absolute position the backgrounds relative to the Relative Parent but just the the right side of the screen. And sets there opacity to 0 unless the accordion item is open.

On mobile, you can:

1. Set the accordion width to 100%.

2. Add this CSS:

@media(max-width: 768px) { 
.gb-container-21677a7b:has(.gb-accordion__item-open) {
    padding-bottom: 300px;
}
.accordion-bg {
    inset: calc(100% - 300px) 0 0 0;
    z-index:-1;
}
}

gb-container-21677a7b is the parent container of the accordion, you can give it an additional CSS class eg. accordion-parent, then replace gb-container-21677a7b with it in the CSS.

Glad we could be of help!