Accordion Scroll Issue - Scroll To Top Of Active Accordion

I implemented an accordion, but I am having an issue with it's contracting body. My accordion menu is made of images and its body contents are partially very long. Each time I clic

Solution 1:

When you open a panel we use element.scrollIntoView(); int this case we can use your element this or open as they are the same when we execute this code.

Hope this helps

var acc = document.getElementsByClassName("accordion");
var i;
var open = null;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    if (open == this) {
      open.classList.toggle("active");
      open = null;
    } else {
      if (open != null) {
        open.classList.toggle("active");
      }
      this.classList.toggle("active");
      open = this;
      //Scroll to clicked element
      open.scrollIntoView();
    }
  });
}

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  width: 103%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin: -5px;
}

/*Code commented to trouble shoot*/
.bg {
/*  width: 100%;*/
}

.active,
.accordion:hover {
  background-color: #fff;
}

.panel {
  padding: 0 0px;
  display: none;
  width: 100%;
  background-color: white;
  overflow: hidden;
}

.accordion.active+div {
  display: block
}

<button class="accordion"><div class="bolimg">
    
    <img class="bg" src="http://via.placeholder.com/140x100">
   
       
  </div></button>
<div class="panel">
  <p></p>
</div>

<button class="accordion"><img class="bg" src="http://via.placeholder.com/140x100"></button>
<div class="panel">
  <p><img src="http://via.placeholder.com/350x150"></p>
</div>

<button class="accordion"><img class="bg" src="http://via.placeholder.com/140x100"></button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus suscipit ipsum, ac tincidunt mauris lacinia eu. Maecenas mi felis, finibus eget lectus vel, sagittis consectetur ante. Phasellus vehicula nibh diam, ac faucibus tellus dignissim maximus. Nullam mattis velit in justo pulvinar molestie. Cras in nibh augue. Pellentesque eget lacinia quam. Aenean ultricies nibh justo, facilisis egestas est tristique et. Morbi dignissim, ipsum vel feugiat tempus, nunc eros gravida ex, nec fermentum est odio laoreet magna. Aenean pulvinar eros eu nulla vehicula finibus. Sed imperdiet, nulla in pulvinar euismod, massa urna blandit enim, ac iaculis lectus massa semper diam. Sed fermentum leo eget dignissim placerat.

Phasellus at euismod dui, tincidunt pharetra dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan viverra ligula, vel eleifend purus. Suspendisse eget lorem bibendum, pretium lacus id, fringilla erat. Cras a fringilla arcu, fringilla consectetur purus. Etiam et pretium magna, et malesuada nisl. Phasellus finibus orci tincidunt enim volutpat mattis. Integer tincidunt mi eu diam hendrerit elementum. Maecenas quis vulputate nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie tortor ac rhoncus ornare. Pellentesque ut nunc ut enim tincidunt tempor sit amet sit amet lectus. Etiam ut lacus tincidunt, blandit elit sit amet, pulvinar lorem.

Morbi et ipsum a urna placerat cursus. Donec porttitor, massa pellentesque rutrum rhoncus, purus arcu imperdiet dolor, quis rhoncus odio ex eget est. Duis volutpat ullamcorper nisl ac vestibulum. Vivamus ut orci vel ex gravida condimentum. Pellentesque aliquet, quam non commodo posuere, leo leo consectetur ex, et lacinia mauris ipsum eget massa. Vivamus bibendum ipsum lacinia felis congue semper. Praesent interdum, nibh eget congue pellentesque, magna neque aliquam lectus, ac viverra risus arcu et nisl.

Proin tempor rutrum dolor. Mauris a elit nec enim semper ultricies sed sit amet purus. Pellentesque et hendrerit justo. Nunc at nisi augue. In hac habitasse platea dictumst. Nunc scelerisque, leo in feugiat dictum, magna dui ultrices diam, nec fringilla dui ante vitae eros. Curabitur vitae tincidunt sem. Aliquam erat volutpat. Vivamus ultrices a massa eget ultricies. Suspendisse in urna ac neque consectetur aliquet eu vel lorem. Pellentesque sollicitudin, risus eu congue placerat, eros purus placerat ex, quis aliquet nulla tellus in neque. Nam vel leo neque.

Etiam facilisis fermentum dui, ut interdum erat lacinia interdum. Praesent ultrices est sem, a sodales nibh placerat sed. In sodales orci sit amet lacus facilisis, ac viverra nisi rutrum. Aliquam non ipsum dapibus, posuere diam quis, gravida mauris. Integer egestas eros lorem, dignissim semper lorem mollis id. Nulla et sapien molestie, iaculis odio eget, varius dui. Suspendisse gravida enim et odio lobortis, sed cursus orci tempor. Nam id sollicitudin velit. Cras rhoncus mauris eu libero pellentesque cursus. Nunc vulputate egestas metus, sed condimentum purus rhoncus et. Nulla facilisi. Donec tincidunt non mauris in imperdiet. Donec at neque et quam gravida porttitor et sit amet enim.</p>
</div>

<button class="accordion"><img class="bg" src="http://via.placeholder.com/140x100"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="http://via.placeholder.com/140x100"></button>
<div class="panel">
  <p>Content body text</p>
</div>

<button class="accordion"><img class="bg" src="http://via.placeholder.com/140x100"></button>
<div class="panel">
  <p>Content body text</p>
</div>