user3191160 user3191160 - 3 months ago 19
CSS Question

Change Accordion Slider to scroll up rather than down

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

http://www.w3schools.com/howto/howto_js_accordion.asp

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:

http://s116169771.websitehome.co.uk/testsite/index2.html

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

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");