Accordion JS 问题 - 单击时它会打开到手风琴的底部，而不是停留在我单击的顶部

Question

Having an issue with an accordion where when i open one, it scrolls to the bottom instead of staying at where i clicked and expanding. I THOUGHT it may be b/ci have other JS on the site that may be conflicting but i removed it from the codepen below and tried it and i still see the same issue.

Update: Codepen and see below for instructions on how to test it to see what i mean:

As mentioned, the site has other JS that i put in the codepen but if you remove it, you'll see the problems still happen.

When viewing Codepen link, on the right side, that is the unrelated JS is for other aspects on the site. The actual Accordion Javascript is on the HTML panel in the CODEPEN at the very bottom (at the bottom of the HTML).

To see what I see:

• open up section 2
• Then scroll down to section 3 and click it to open it, you'll see that it auto scrolls to the bottom of section 3.

Or

• with section 3 open, try to open section 4 and it scrolls to the bottom instead of staying at the top.

I wanted the first accordion open when reaching the section which it does, however it seems that it has an issue when what's INSIDE the is higher than the height of the screen.

I'd like it though that if click on Accordion Title 4 that it stays at the same point on the screen instead of taking me to the bottom of the panel.

Right now, if i click on accordion 3 for example, it takes me to the bottom of the accordion and i have to scroll up to the accordion 3 title. As mentioned, it seems to do this or have this problem ONLY when the height of the panel is higher than the height of the 100VH

IMPORTANT NOTE: it does seem that when all accordion panels are closed, and i try to open one it doesn't do this. For example, i reloaded the page and the first accordion is open by default, and i tried to open the last one which i have a contact form in my real code, and it had the problem of scrolling to the bottom of the panel. If i closed the first one though, and they're all closed, it doesn't seem to have that issue

Any help would be appreciated! Thanks!

The JS that is for the accordion on the HTML panel (left) at the bottom is

  // W3C's JS Code
  var acc = document.getElementsByClassName("accordion");
  var i;
    
  // Open the first accordion
  var firstAccordion = acc[0];
  var firstPanel = firstAccordion.nextElementSibling;
  firstAccordion.classList.add("active");
  firstPanel.style.maxHeight = firstPanel.scrollHeight + "px";

  // Add onclick listener to every accordion element
  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
      // For toggling purposes detect if the clicked section is already "active"
      var isActive = this.classList.contains("active");

      // Close all accordions
      var allAccordions = document.getElementsByClassName("accordion");
      for (j = 0; j < allAccordions.length; j++) {
        // Remove active class from section header
        allAccordions[j].classList.remove("active");

        // Remove the max-height class from the panel to close it
        var panel = allAccordions[j].nextElementSibling;
        var maxHeightValue = getStyle(panel, "maxHeight");
      
      if (maxHeightValue !== "0px") {
          panel.style.maxHeight = null;
        }
      }

      // Toggle the clicked section using a ternary operator
      isActive ? this.classList.remove("active") : this.classList.add("active");

      // Toggle the panel element
      var panel = this.nextElementSibling;
      var maxHeightValue = getStyle(panel, "maxHeight");
      
      if (maxHeightValue !== "0px") {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    };
  }
  
  // Cross-browser way to get the computed height of a certain element. Credit to @CMS on StackOverflow (http://stackoverflow.com/a/2531934/7926565)
  function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Answer 1

This is a workaround, works, but not very smoothly, to have a smoth experience I bellieve you will need to change to a way where the clickable elements are always on the same spot, because the content is very long. For example tabs instead of the accordion, where the tabs will always be on top and the content will be toggled beneath.

Here it is:

Add an id to each of the accordions, for example:

<button id="section1" class="accordion">Section 1</button>

<button id="section2" class="accordion">Section 2</button>

and so forth..

And add this piece of code anywhere inside the function in acc[i].onclick = function() { }

setTimeout(() => {
        location.href = "#" + accordions[i].id;
      }, 200);

When we use for example location.href = "#someid" the browser will position the page to show the element that has that id.