保持手风琴的特定面板打开

Question

I'm using basic JS for an accordion/collapsible which works well, except now I want to have one panel within a group open at start.

I then tried using JQueryUI for this since it does keep one panel open to start, but then it does not permit multiple panels open at the same time. I read through the documentation and I don't see where/if that's configurable.

So I'm wondering if there's a way to either modify the below that I had originally or, alternatively, if I'm missing something with JQueryUI.

  <script>
      var acc = document.getElementsByClassName(" ols-accordion");
      var i;
      for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function () {
              this.classList.toggle("active");
              var
                  olsPanel = this.nextElementSibling;
              if (olsPanel.style.maxHeight) {
                  olsPanel.style.maxHeight = null;
              } else {
                  olsPanel.style.maxHeight = olsPanel.scrollHeight + "px";
              }
          });
      }
  </script>

      .ols-accordion {
          background-color: #fff;
          color: #1e1e1e;
          cursor: pointer;
          padding: 18px;
          width: 85%;
          box-sizing: border-box;
          border: 1px solid #eaeaea;
          border-bottom: 0;
          text-align: left;
          font-size: 18px;
          line-height: 24px;
          transition: 0.4s;
      }

      .olsPanel {
          width: 85%;
          box-sizing: border-box;
          padding: 0 18px;
          margin-bottom: 10px;
          background-color: #fff;
          border: 1px solid #eaeaea;
          border-top: 0;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
      }

Would I need to first add a class or ID to a panel that I want to stay open and then write something separately that assigns the maxHeight to that element equal to the scrollHeight ? Almost like the inverse of what I have above?

Answer 1

Here is an example using event.target , passing the event into the event listeners function and then using the actual element being pressed to toggle a class to apply CSS to that element.

EDIT: If you want one of your elements to be open on the page load, simply add the show class to that elements HTML and it will be open when the page loads.

 //--> Return a node list of all element with the.acc class selector const acc = document.querySelectorAll('.acc') //--> run the event (e) into a function and get the //--> nextElementSibling and toggle a class using //--> classList.toggle() function showPanel(e) { e.target.nextElementSibling.classList.toggle('show') e.target.classList.toggle('btnBG') } //--> forEach loop that will iterate over each element within the //--> node list, assign the variable el, to each matching node within that //--> node list and then assign an eventListener listening for a click //--> we run the function that toggles the class on our sibling element acc.forEach(el => { el.addEventListener("click", showPanel) })

 .flex-item { display: flex; flex-direction: column; justify-content: start; align-items: start; width: 100%; }.acc { flex: 0; line-height: 1.5rem; padding: .5rem; border-bottom: 1px solid #DDD; }.acc:nth-of-type(1) { border-top: 1px solid #DDD; }.panel { display: none; }.show { display: inline-block; }.btnBG { background-color: lightgreen; }

 <div class="flex-item"> <div class="acc btnBG">Section 1</div> <div class="panel show"> <p>Lorem ipsum...1</p> </div> <div class="acc">Section 2</div> <div class="panel"> <p>Lorem ipsum...2</p> </div> <div class="acc">Section 3</div> <div class="panel"> <p>Lorem ipsum...3</p> </div> </div>