更改手风琴滑块以向上滚动而不是向下滚动

Question

I have managed to create an accordion slider thanks to the following link:

w3schools.com

and I was wondering if it's possible to change the accordion slider to scroll the content above the button (from the top) rather than below the button. What I have created can be seen at the following:

s116169771.websitehome.co.uk

but when looking through the javascript, I can't see anything specific that will allow me to make this change.

To be fair, I am not sure if this is something that can be done with this particular code or if this would have to be written separately but any advice would be really appreciated.

Current JS Code

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

Thanks in advanced.

Answer 1

Move the corresponding button under the div panel that you want it to show

<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="accordion">Section 3</button>

then switch the Javascript command from :

this.nextElementSibling.classList.toggle("show");

to:

this.previousElementSibling.classList.toggle("show");

Answer 2

Move the divs above the buttons instead

and then change this: nextElementSibling to: previousElementSibling

<h2>Accordion</h2>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="accordion">Section 1</button>

<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="accordion">Section 3</button>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.previousElementSibling.classList.toggle("show");
  }
}
</script>