Can accordion pages be pre-expanded when the page loads?

Custom code
1

I’ve been making some relatively minor customizations to the preset accordion code (changing font, color, text weight etc.) but keep running up against a wall when I try to make it so that the accordion’s first page/container is pre-expanded when the page loads. (Why? Expanding an accordion page cannot push down the widgets below it, so you have to leave enough of a gap beneath the accordion to avoid its content getting lost behind other widgets – this can leave a big gap on the page, which IMO would look better if the first page was pre-expanded when the page loads, so the gap is filled).

Has anyone tried this? Or have any idea of how it might be done? Thanks in advance for any advice!

Here’s my current code just in case:

<div class="accordion-container">
  <p class="accordion" style="border-top: 2px solid #174f18ff;">Page 1</p>
  <div class="accordion-content">
    <p>
Redacted text
    </p>
    <br />
  </div>

<p class="accordion">Page 2</p>
  <div class="accordion-content">
    <p>
Redacted text 
    </p>
    <br />
  </div>

<p class="accordion">Page 3</p>
  <div class="accordion-content">
    <p>
Redacted text 
    </p>
    <br />
  </div>

<style>
    /* accordion title text styles */
    .accordion-container p.accordion {
      position: relative;
      font-family: Lexend;
      font-size: 13px;
      font-variation-settings: 'wght' 340;
      color: #174f18ff;
    }
    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: Lexend;
      font-size: 11px;
      color: #174f18ff;
    }
    /* accordion content link styles */
    .accordion-container .accordion-content a {
      font-family: Lexend;
      font-size: 11px;
      font-style: italic;
      color: #174f18ff;
    }
    /* accordion title styles */
    .accordion-container .accordion {
      cursor: pointer;
      padding: 15px 8px;
      margin: 0;
      font-weight: 300;
    }
    /* accordion icon box styles */
    .accordion-container .accordion::after {
      content: '✕';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%) rotate(-45deg);
      font-size: 11px;
      transition: .2s ease-out;
    }
    /* accordion icon box styles: opened  */
    .accordion-container .active::after {
      content: "✕";
      transform: translateY(-50%) rotate(0deg);
      font-size: 11px;
    }
    /* accordion content box styles: default */
    .accordion-container .accordion-content {
      padding: 0 8px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.2s ease-out;
      border-bottom: 2px solid #174f18ff;;
    }
  </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”);}}})();
2

hey. this is for sure possible.
If you look onto your code you see, that the function to expand a element is already there.
You could try to add the class “.active” to the first html “accordion-content”.

Maybe this is already the solution.

Otherwise you would need to run the function “showContent” on the first content section manually.

Or you simulate a click on the first element via javascript/jquery. (element.click():wink: