Accordion menu up

Site URL: https://www.lildarkartz.com/

Can an accordion menu open upwards, towards the top of the site?

No I don't believe it's possible to do that, what are you trying to achieve?

You can't do it from the settings but you could workaround the problem with some custom CSS.

.accordion-item {
   display: flex;
   flex-direction: column;
   h4 {
      order:1;
   }
}

But then some other issues arrise, like where will the divider be when you open the accordion item and should it scroll up to the descriptions top when you open one item?

5 hours ago, joseph81 said:

You can't do it from the settings but you could workaround the problem with some custom CSS.

.accordion-item {
   display: flex;
   flex-direction: column;
   h4 {
      order:1;
   }
}

But then some other issues arrise, like where will the divider be when you open the accordion item and should it scroll up to the descriptions top when you open one item?

I could not get that to work but thank you so much, maybe I was adding it wrong. 

Here is a picture, I basically want the accordion items to go up and not make the website longer each time it is opened.

It did not work because you have h2 tags instead of h4. Try this code.

.accordion-item {
   display: flex;
   flex-direction: column;
   h2 {
      order:1;
   }
}

29 minutes ago, joseph81 said:

It did not work because you have h2 tags instead of h4. Try this code.

.accordion-item {
   display: flex;
   flex-direction: column;
   h2 {
      order:1;
   }
}

 

oh, ok yes that work but it shoves the about done now, it there any way to make it so that does not happen? or it overlaps other things?

.This could do the trick, you can customize even more, how to look, spacing etc.

.accordion-item__dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff;
}
.footer-sections {
    z-index: 12;
}

oh wow, that looks super cool thank you so much, last question for that can I make it so it works with hover and not click?

.accordion-item:hover .accordion-item__dropdown {
	display: block;
}

footer .accordion-item:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}