Accordeon opacity

Hi there,

i would probably NOT use the Accordion for that, as it would be a bit hacky.

Instead i would use other blocks and some JS.

Set the Layout as such:

Container Block #1 
---- Your other content goes here
---- Container Block #2
---- ---- GB Button

Container Block #1 give it an Advanced > Additional CSS Class of: reveal-content
Container Block #2 give it an Advanced > Additional CSS Class of: reveal-button
GB Button give it a class of reveal

Add this Javascript to the site:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var revealLinks = document.querySelectorAll('.reveal');
  revealLinks.forEach(function(link) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      var revealContent = this.closest('.reveal-content');
      revealContent.classList.toggle('show');
    });
  });
});
</script>

This will toggle the show class on the reveal-content container when the button is pressed.

Now add this CSS:

.reveal-content {
    position: relative;
    overflow: hidden;
    padding-bottom: 80px; /* space for the button */
}
.reveal-content:not(.show) {
    max-height: 400px;
}
.reveal-button {
    position: absolute;
    inset: 0;
    top: unset;
}

Some of these styles can be applied in the block styles if you want but the main work is the CSS that sets the max-height property when the SHOW class is NOT present.

Then its case of stying that reveal-button container eg. add a Gradient background for the fade and center the button.

That CSS its not wrapped inside a desktop only media query ?
If it isn’t can i see the issue on the site

Glad to hear that!