Accordion not opening properly on...

User 2886045 Photo


Registered User
38 posts

If I am on the mobile site, the top few accordions in my project work properly. But on the third or so, it will jump down the screen and you can't read the container you just opened.
User 2886045 Photo


Registered User
38 posts

http://kupkafamily.com/smstracker/

On the mobile site, if you open an accordion in the middle of your screen, it will jump up and down and all around and it makes this hard to read. Many of these have been copied from each other, so perhaps this is why. I don't know if changing the alignment or from static to float would work. I tried, but nothing has worked yet.

Can I add anchor points to this or something?
User 244626 Photo


Registered User
811 posts

DragonClaw wrote:
http://kupkafamily.com/smstracker/

On the mobile site, if you open an accordion in the middle of your screen, it will jump up and down and all around and it makes this hard to read. Many of these have been copied from each other, so perhaps this is why. I don't know if changing the alignment or from static to float would work. I tried, but nothing has worked yet.

Can I add anchor points to this or something?


That is annoying I agree. I do not have a answer but it seems that when opening any part of the accordion one would want to bind that event to a scroll to function (or a anchor) ?

Probably going to require jquery.....

you might pursue a search along the line of this....

https://stackoverflow.com/questions/362 … -open-item
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Ok so this is pretty cool if it works....and it seems to. Paste this script code into your footer in page settings.

<script>
$('.accordion').on('down.zf.accordion',function(event,target){
event.preventDefault();
$('html, body').animate({
scrollTop: $(this).find('.accordion-item.is-active').eq(0).offset().top - 5,
},300);
return false;
});
</script>

It should close the accordion item thats open and then open the next accordion item that is clicked and scroll it to the top of the screen.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Looks like you have it working. I would consider adding a media query to the jquery script to have it only occur on mobile though. Not really needed on desktop.....
Bootstrap 5 CSS Grid.
User 2886045 Photo


Registered User
38 posts

I'm sorry, been so busy not really time for much. People coming over and all the animals and stuff. Realizing my video card is outdated and sad, trying to get a new bird etc.

Anyway. Yes, it worked very much and I am not up on all the jquery and what not. Thank you for all you have done to help me here and on other posts. I will try to work on that and a friend knows a lot more on query stuff, he can probably help me out on this.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.