Change behavior of accordion

[Ghiotto]

Hi, I have changed the behavior of an accordion so its titles elements are displayed inline.

All works fine, but I would like to eliminate the hight transition that affects the accordion element content and use a simple fade in effect. I have tried with css, but the high animation persist, can you help me achieve this result?

You can find this accordions in correspondance of CHI SIAMO and STORIA text.

http://sovecar.com/

Thanks

[ruenel]

Hello Alessandro,

Thanks for posting in! I have edited already my host file. I am still not see the site using the X or Pro theme. Can you please provide us the screenshot and the custom css that you use so that we will try to replicate it in our local testing server instead?

Thanks in advance.

[Ghiotto]

Hi, it’s strange that you cannot see the site. Anyway, here there is the screenshot of my modified accordion

It’ clear that with a simple screenshot you can’t see the behavior that I have described in the first post.

Here the css part

/*Accordions*/

.home .services .x-container,
.home .description .x-container,
.home .certficazioni .x-container,
.home .news  {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.home .services #servizi-accordion,
.home .description #azienda-accordion {
    float: left;
    width: 100%;
}

.home .description .x-accordion-group {
    float: left;
    width: 50%;
    border: none;
}

.home .services .x-accordion-inner,
.home .description .x-accordion-inner {
    border: none;
}

.home .services .x-accordion-heading .x-accordion-toggle,
.home .description .x-accordion-heading .x-accordion-toggle {
    background-color: transparent;
    color: #000;
    font-size: 1.875rem;
    font-family: "Raleway", Arial, Helvetica, sans-serif;
    font-weight: 500;
    pointer-events: none;
}

.home .services .x-accordion-group:first-of-type .x-accordion-heading .x-accordion-toggle,
.home .description .x-accordion-group:first-of-type .x-accordion-heading .x-accordion-toggle {
    text-align: right;
}

.home .services .x-accordion-group:last-of-type .x-accordion-heading .x-accordion-toggle,
.home .description .x-accordion-group:last-of-type .x-accordion-heading .x-accordion-toggle {
    text-align: left;
}

.home .services .x-accordion-heading .x-accordion-toggle.collapsed:hover,
.home .description .x-accordion-heading .x-accordion-toggle.collapsed:hover {
    color: #000;
}

.home .services .x-accordion-heading .x-accordion-toggle.collapsed,
.home .description .x-accordion-heading .x-accordion-toggle.collapsed {
    color: #909090;
    pointer-events: all;
}

.home .services .x-accordion-heading .x-accordion-toggle:before,
.home .description .x-accordion-heading .x-accordion-toggle:before {
    display: none;
}

.home .description .x-accordion-body {
    width: 200%;
}

.home .description .x-accordion-group:last-of-type .x-accordion-body {
    left: -100%;
    position: relative;
}

.home .services .x-accordion-group {
    float: left;
    width: 33.333333%;
    border: none;
}

.home .services .x-accordion-body {
    width: 300%;
}

.home .services .x-accordion-group:nth-of-type(2) .x-accordion-heading .x-accordion-toggle {
    text-align: center;
}

.home .services .x-accordion-group:nth-of-type(2) .x-accordion-body {
    position: relative;
    left: -100%;
}

.home .services .x-accordion-group:last-of-type .x-accordion-body {
    position: relative;
    left: -200%;
}

Let me know, thanks!

[ruenel]

Hello Alessandro,

I have successfully viewed your site and saw the accordion element. Please be advised that accordion items used show and hide contents which made the height transition. Adding any custom css complicates your issue. Since you would like that kind of layout, I would highly recommend that you remove your accordion element and use Tabs element instead. This will give the same layout with more controls over it. If you set the “Equal Height” setup in the panels then your issue should be resolved.

Hope this helps.