jQuery ui accordion child css-counter being overridden

Question

I'm going bonkers trying to understand why my CSS Counter is being over-ridden in the jQuery UI Accordion.

I have sections and within the sections, I have various numbers of Ul > LIs. I have the counter-reset applied to the body tag and I have the increment set to the class of assigned to SPAN TAGs inside the LIs.

When I expand the sections, I see the numbers increment, but when the animation is completed, the number start at 1 in each section.

There is obviously a great deal of code that would need to be placed in this question, so the best would be to simply point you to the page in question: https://zindolabs.com/course/create-your-signature-system/

Here is the CSS for it all:

body {
  counter-reset: lesson-counter !important;
}
.lesson-title::before {
  counter-increment: lesson-counter !important;
  content: counter(lesson-counter,decimal-leading-zero);
  font-size: 2em;
  color: darkgrey;
  vertical-align: middle;
  margin-left: -30px;
  padding-right: 20px;
}

I'm thinking the accordion styles are loading after my overrides, but in WordPress, I've added all CSS in the Customizer to ensure it loads last.

P.S. I've also got the accordion loading inside a Divi (builder) module but not sure that is attributing to the issue.

Any advice would be appreciated.

Best Regards

Answer 1

I think your code is fine but it is not working as expected because CSS counter omit the element if the element itself or container invisible by "display:none". Your every section of accordion is by default "display:none" except active one. When you active another then current one going as "display:none". So counter only counting active section and omit the rest of others.

Solution:

You need your every section keep by default display:block anyhow then manage by your accordion active class 'ui-accordion-content-active'. Add below CSS bottom side of your CSS file I think it will work for you:

.ui-accordion .ui-accordion-content { display:block !important; height:0; overflow:hidden;}
#accordion-section-panel.ui-accordion .ui-accordion-content { padding-top: 0!important; padding-bottom: 0!important;}
.ui-accordion .ui-accordion-content.ui-accordion-content-active { height:auto;}
#accordion-section-panel.ui-accordion .ui-accordion-content.ui-accordion-content-active { padding-top: 10px!important; padding-bottom: 10px!important;}