Animate Accordion

  • Resolved francishunger

    (@francishunger)


    6 years ago

    Hi,

    I would like to smoothly animate the opening and closing of an accordion item in CSS. It thought, it might work with .wp-block-coblocks-accordion-item details[open] yet didn’t get it to work.

    Any suggestions are welcome.

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support gdpavle

    (@gdpavle)

    6 years ago

    Hi @francishunger,

    Thank you for reaching out. 🙂

    You can try the following CSS code:

    details {
  transition: height 1s ease;
}
details:not([open]) { height: 54.5px; }
details[open] { height: 120px; }

    You just have to play with the number of pixels for the height to adjust it specifically for the content you’d like to place under each accordion.

    Let me know if this worked for you. 🙂

    Best Regards,
    Pavle

    Thread Starter francishunger

    (@francishunger)

    6 years ago

    Hi Pavle, thanks for your reply. It worked when I added the vendor-prefixes for transistion.

    There is a caveat however.

    details[open] { height: 120px; }
    When we give this a total height, it doesn’t accomodate for varying text amounts in the answers, some are longer and will need much mor space than 120px in Height.

    Here is a lengthy article which discusses it: https://css-tricks.com/using-css-transitions-auto-dimensions/ I’ve tried the flexbox approach but it didn’t work. Implementing the javascript version seems to be too much of an effort.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Animate Accordion’ is closed to new replies.

Tags