Hi Nikko,

I locked the toggle several “title fields” with this css:

p[data-fake-id=’#toggle-id-1′] {
background-color: rgba(242,255,0,0.3)!important;
pointer-events: none;
}

p[data-fake-id=’#toggle-id-9′] {
mix-blend-mode: screen!important;
background-color: rgba(0,115,255,0.3)!important;
pointer-events: none;
}

p[data-fake-id=’#toggle-id-13′] {
background-color: rgba(0,115,255,0.3)!important;
pointer-events: none;

}

Is there any better solution for this? How can I get page-id? What is nth-child.
Sorry, I have very minor programming skills.

Best Regards, Marcin

• This reply was modified 8 years ago by ioiobit.

…

Dear Nikko,

Sorry for my late reply!
I think i’m really happy with the present state of the accordion toggles. I have one more question. I need CSS for making several toggles just inactive (locked like).I would like to use them as “info” sections. My problem is, I want to use two accordions on the same page. How can I change properties of one toggle “title” section in the first or second accordion.

Example scheme: first title field of the first accordion is blue and locked.

Best Regards, Marcin

Hi Nikko,
1. I mean showing content through “hover” action (Like in the case of accordion slider).
2. Shit:) I’m really missing this function!:)
By the way, there is still some minor problem with “linked” overlay of the content.
The overlay is jumping about 2px from left to right while hovering.

Best Regards, Marcin

Hi Nikko,
Ok! The Site should work now.
Regards, Marcin

Dear Nikko,
I already tried this one.
Background disappeared, but the linked picture is still moving up and down on mouse hover.
Do you have any idea, how to get rid of this “jumpy”content behavior?

Best regards, Marcin

• This reply was modified 8 years, 1 month ago by ioiobit.

Hello?:) I would appriciate some advice:)

• This reply was modified 8 years, 1 month ago by ioiobit.

Hi Nikko!
Thank you for you fast help!
It worked, but in the case where “toggle content” is linked the top-line still exist.
Best Regards, Marcin

Hi Rikard,

I appreciate your fast answer!

I already solved animation problem of my toggle, but I have another one:) Padding of the toggle content picture doesn’t changed after implementing CSS code. There is still black field on the top and bottom of my content test pictures.
The “Maximum Container width” doesn’t take any influence on my layout when using Enfold backend (only CSS works).
Since I’m not a programmer, it is possible I made some coding mistakes:)
I’m still looking for solution of 2nd and 3rd question. Thank you of Your help!
Best Regards, Ioio

My quick css:

#top.boxed, .html_boxed.html_header_sticky #header, .container {
max-width: 1210px;
width: 100%;
}

.active_tc.toggle_wrap {
display: none;
}

.toggle_content {
padding: 0!important;
margin-bottom: 20px;
border: none;
}

.js_active .toggler {
font-size: 15px;
font-weight: bold;
padding-left: 50px;
}

.av_toggle_section .toggler {
background: rgba(1,1,1,0.4) !important;
transition: all .2s linear !important;
border-radius: 0px !important;
border: 2px solid;
border-right: none;
border-left: none;
border-bottom: none;
}

.av_toggle_section .toggler:hover {
background-color: #000000!important;
border-radius: 0px!important;
border-color: #f2ff00!important;
}

.toggle_icon {
background: none!important;
border-style: solid;
border-width: 2px;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
border-radius: 10px;
}

.toggle_icon .vert_icon {
border-left-width: 2px;
height: 12px;
top: 2px!important;
left: 7px!important;
}

.toggle_icon .hor_icon {
width: 12px;
border-top-width: 2px;
left: 2px!important;
top: 7px!important;
}

.toggle_icon, .toggle_icon .vert_icon, .toggle_icon .hor_icon {
border-color: #c94e8e!important;
}