Trouble With Styling Accordion Element In Active State

General
1

Hi guys, need some help here…

I have used accordions on my site, and am styling things in the hover state and active state. I have seen the video tutorial about accordions and have succeeded in making various accordions and styling them exactly as I desired, including the open-close toggle button.

However now I have run into a problem with styling a particular div that I want the background color to change in the active state. Whatever I do though, the background color is not being applied when I view on the front end.

I have successfully applied changes to the very same div for the hover state and do not think I am doing anything wrong, but just can’t get it to work. When I do the same thing to other divs, using the active selector and then ‘target children with class’ I get the expected results, but not on this div.

Please let me know oh wise ones what the reason is that my background color is not being applied in the active state :person_shrugging: I thought it might be a bug, but then again maybe it is not a bug and something else is going on with Divhunt that I am not noticing.

Screen rcording of issue:
Trouble With Styling Accordion Element In Active State

Link to the webpage I am working on

Here is the CSS form the accordion div I am working on that you can see in the above linked screeen recording:

self {
	width:100%;
	border:1px solid var(--cta);
	display:flex;
	background:rgba(244,248,255,1.00);
	transition:all 200ms 0ms ease;
	margin-left:auto;
	margin-right:auto;
	border-radius:8px;
	flex-direction:column;
}

:hover {
	background:rgba(227,238,255,1.00);
	box-shadow:1.5px 1.5px 1.5px 0.2px rgba(195,196,195,0.41);
}

.dh-active {
	background:rgba(227,238,255,1.00);
}

:hover img:nth-child(1) {
	background:rgba(244,248,255,1.00);
}

.dh-active img:nth-child(1) {
	transform:rotate(45deg);
	background:rgba(244,248,255,1.00);
}

:hover .pricing-accordion-read-more-div {
	background:rgba(244,248,255,1.00);
}

.dh-active .pricing-accordion-bottom-div {
	border-radius:0px 0px 8px 8px;
}

.dh-active .pricing-accordion-read-more-div {
	background:rgba(244,248,255,1.00);
}

That last line .dh-active .pricing-accordion-read-more-div is the one not showing on the front end.

2

After doing some more testing I have come to believe that this maybe a bug with renamed classes bugging out somehow and not applying on the front end sometimes.

You can watch this video where I show that if I use another new class, my accordion styling attempts work, whereas when I use a class that has been renamed in the past, it does not work:

3

I am going to go ahead and delete all my classes that apply to the accordion and remake them to proceed with my site, but this is a bug in Divhunt that I hope can be looked at and fixed.

4

Yes, you are right, we do have an issue with renaming classes. We will try to resolve it asap, until then, try not to rename classes :smiley:

1 Like
5

Good to know that it is actually bug and I am not going crazy :crazy_face:

Ok I will refrain from renaming classes for the time being.

6

There is also an error when trying to create a class in the classes interface: