CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mowen10
mowen10

Reputation: 393

Change Accordion Slider to scroll up rather than down

I have managed to create an accordion slider thanks to this link 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 here, but when looking through the javascript, I can't see anything specific that will allow me to make this change.

Is this something that can be done with this particular code or would it have to be written separately?

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>

Upvotes: 0

Views: 138

Answers (2)

Danimal
Danimal

Reputation: 333

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

Upvotes: 1

krisph
krisph

Reputation: 697

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>

Upvotes: 0

Related Questions