accordion shaking

[MeesterGijs]

Could you help me fix this? It's this page, but I guess at any other place with accordion as well...   UPDATE: I used this fix. But still, how come this is happening.

[logan]

Hey, Yeah i can see that. this could be a cache issue. please delete browsers cache and check if it resolves. Refer this: https://screencast-o-matic.com/watch/cqVv1O34GF let me know if there is something i can help with. regards

[MeesterGijs]

Caching wasn't the issue. Perhaps the styling of accordion has changed with an update and doesn't fit the space anymore?? When deleting this code it came back, see video.   /* EXTRA OEFENINGEN dit nodig omdat de titel trilde (jitter) bij hovering */ .page-id-4634 .accordion-heading a{display:block;}   /* EXTRA OEFENINGEN hover over tekst */ .page-id-4634 .accordion-heading a:hover{ color: #88deb4 !important; }   /* LEERTIPS dit nodig omdat de titel trilde (jitter) bij hovering */ .page-id-722 .accordion-heading a{display:block;}   /* LEERTIPS  hover over tekst */ .page-id-722 .accordion-heading a:hover{ color: #88deb4 !important; }   /* EXAM ANTWOORDEN dit nodig omdat de accordion jittert en om hover color fff te houden */ .single-course .course_finish .accordion-heading a{display:block;} .single-course .course_finish .accordion-heading a.accordion-toggle:after{display:block;} .single-course .course_finish .accordion-heading a:hover{ color: #fff !important; } .single-course .course_finish .accordion-heading a.accordion-toggle:after:hover{ color: #fff !important; }

[logan]

Well,  that is possible. So if you know the origin of the problem? what do you want me to do with this?

[MeesterGijs]

That's the thing. I don't know the origin.. Was just a suggestion. Someone told me yesterday. Don't know how long this is jittering/shaking. I'm just worried that eventually all this code on code on code on top of code will make my site vulnerable and slow.

[logan]

Hello, I agree with vulnerable but not slow because if you copy codes from customizer > custom css and paste it in notepad. save this file as custom.css and after that check its property. this will be in a kb size. it does not take much space. your website will run as it does trust me. for the vulnerable thing there is nothing we cant fix with codes. codes are magic. if you want you can use theme's normal functionality. that will remain unchanged forever. that will work smooth. if you are adding extra codes as per your requirement then you have to be lil careful about it. it may cause lil issues with updates but that does not mean that could not be fixed. this is what we do here to help our valuable customers. i hope you understand what am i trying to make you understand.

---

for the issue: i still did not find anything it does not happen at my end don't know why. am i skipping something ?? Here is the video: https://screencast-o-matic.com/watch/cqVwiu3zxO if removing those wicked codes solve your problem. remove them and let me know i will write new codes to style those accordions. Once we get some feedback, we can take the next troubleshooting step in resolving your issue.    

[MeesterGijs]

I definitely understand and even agree with what you are saying. Regarding the issue. I will create a private page where I'll add the accordion. I've noticed that the code only works for the accordions on 1 page. So I have three pages with accordions, so I used page id's plus code. I'll create a new page and don't add the code to make them stop jitter. You'll see the issue there. I can't delete the code because some public pages will then not function and I don't want my visitors to see that. First I have an appointment. I will add a comment once the page is up. Talk to you later, today.

[MeesterGijs]

This reply has been marked as private.

[logan]

Hey, Use this code in custom css. div.accordion .accordion-group.panel .accordion-heading a:hover {display: block !important; color: #fff !important;} it stops the jittering.  

[MeesterGijs]

Without the code for color... Does the code work for accordions on all/any page? So like this: div.accordion .accordion-group.panel .accordion-heading a:hover {display: block !important;}

[logan]

Actually the main problem was : a class with the display: none; property was working on the accordion's heading. on mouse hover it was hiding.  i have given text color because of the same color was applied on heading as well as background. Probably, it should work.

[MeesterGijs]

Thanks, worked great! But.. I still have the accordion that shows after completing course. It now shows green text when hovering. See this screenshot. So it's not visible when clicking it. How do I turn the text of that specific hovering to #fff? You can find this green bar in any finished course. So you need to start one and just click through it. Even with just 0% score you'll get the bar at the end...

[logan]

Hello, use this custom css. .page-id-14452 div.accordion .accordion-group.panel .accordion-heading a:hover {color: #fff !important;} this will work on this page only: http://prntscr.com/mgw16e Because it have white background the above code will conflict with white font color. on this page : https://meestergijs.nl/extra-oefeningen/

[MeesterGijs]

But I need it to work on every course page after completing course, not other pages; screenshot

[logan]

Hello,

Try this custom css.

.page div.accordion .accordion-group.panel .accordion-heading a:hover {color: #f12f2f !important;}

[Author]

Posts