"Accordion" Toggle – Animation problem!

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;
}

Hi Rikard,
Thank you for your fast response!
Yes, I want to remove the space between image and the title bar.
The margins are now a little bit shorter but unfortunately they didn’t disappear.

Regards, Ioio

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 Nikko,

No, I’m referring to the last “linked” section of the toggle. It is called “l 2010 l roller l”.
If you try to hover over the picture, the blue balk will appear on the upper side of this “linked” section.
Best Regards, Marcin

Hello? Anyone there?

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.

…

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.