Accordion list doesn't push content down

Custom code
1

Hi all, I’m trying to figure out how to have the custom accordion list code actually push down the content that follow the accordion. Right now, when the accordion lists are expanded, it goes behind the content that follows it, instead of actually pushing the content down. Is there a way to fix that?

Here’s the code:

<div class="accordion-container">
  <p class="accordion" style="border-top: 1px solid #999;">Project Info</p>
  <div class="accordion-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <br />
  </div>
  <p class="accordion">Roles</p>
  <div class="accordion-content">
    <p>
      Placeholder list
      <br />
      Placeholder list
      <br />
      Placeholder list
    </p>
    <br />
  </div>
  <p class="accordion">Team</p>
  <div class="accordion-content">
    <p>
      Placeholder name
      <br />
      Placeholder name
      <br />
      Placeholder name
    </p>
    <br />
  </div>
  <style>
    /* accordion title text styles */
    .accordion-container p.accordion {
      font-family: Space Mono;
      font-weight: 400;
      font-size: 10px;
      color: #FFFFFF;
    }
    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: Inter;
      font-size: 12px;
      font-style: normal;
      line-height: 18px;
      color: #FFFFFF;
    }
    /* accordion content link styles */
    .accordion-container .accordion-content a {
      font-family: Inter;
      font-size: 12px;
      line-height: 18px;
      font-style: normal;
      color: #FFFFFF;
    }
    /* accordion title styles */
    .accordion-container .accordion {
      cursor: pointer;
      padding: 15px 0px;
      margin: 0;
      font-weight: 300;
      color: #FFFFFF;
    }
    /* accordion icon box styles */
    .accordion-container .accordion::after {
      content: '✕';
      float: right;
      transform: rotate(-45deg);
      font-size: 11px;
      transition: .2s ease-out;
      color: #FFFFFF;
    }
    /* accordion icon box styles: opened  */
    .accordion-container .active::after {
      content: "✕";
      transform: rotate(0deg);
      font-size: 11px;
      color: #FFFFFF;
    }
    /* accordion content box styles: default */
    .accordion-container .accordion-content {
      padding: 0 0px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.2s ease-out;
      border-bottom: 1px solid #999;
    }
  </style>
</div>
<script>
  
  (function() {
  const accordionHeading = document.querySelectorAll(".accordion");
  const accordionContent = document.querySelectorAll(".accordion-content");
  for (let i = 0; i < accordionHeading.length; i++) {
    accordionHeading[i].onclick = function() {
      if (this.nextElementSibling.style.maxHeight) {
        hideContent();
      } else {
        showContent(this);
      }
    };
  }
  function showContent(elem) {
    hideContent();
    elem.classList.add("active");
    elem.nextElementSibling.style.maxHeight =
      elem.nextElementSibling.scrollHeight + "px";
  }
  function hideContent() {
    for (let i = 0; i < accordionContent.length; i++) {
      accordionContent[i].style.maxHeight = null;
      accordionHeading[i].classList.remove("active");
    }
  }
  })();
</script>
2

As Rm is built different than other builders, there is no easy option to adapt the website height, or push down a block of content.
I mean, with a bit of javascript this should be possible, but i wouldn´t recommend.

Only thing you can do is to hide the overlay. for example by moving content up or down on clicking on the accordeon. Or fading out/in elements while the accordeon is expanded.

3

ah, that’s disappointing… do you have a tutorial or reference on how I can achieve your recommendations on hiding the overlay? do you mean something like, moving the existing content down so that there’s more space for the accordion to fill when it’s expanded?

4

I don´t have a tutorial here.
But yes, just play around with elements, that are filling the gap if the accordeon is folded but fadeout or move out if it gets folded out.
This might only work if the accordeon content isn´t that long.