question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accordion: component should support transitions

See original GitHub issue

Steps

Use the Accordion component here from the docs: https://react.semantic-ui.com/modules/accordion#accordion-example-standard

import React from 'react'
import { Accordion, Icon } from 'semantic-ui-react'

const AccordionExampleStandard = () => (
  <Accordion>
    <Accordion.Title>
      <Icon name='dropdown' />
      What is a dog?
    </Accordion.Title>
    <Accordion.Content>
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
        {' '}it can be found as a welcome guest in many households across the world.
      </p>
    </Accordion.Content>
    <Accordion.Title>
      <Icon name='dropdown' />
      What kinds of dogs are there?
    </Accordion.Title>
    <Accordion.Content>
      <p>
        There are many breeds of dogs. Each breed varies in size and temperament.
        {' '}Owners often select a breed of dog that they find to be compatible
        with their own lifestyle and desires from a companion.
      </p>
    </Accordion.Content>
    <Accordion.Title>
      <Icon name='dropdown' />
      How do you acquire a dog?
    </Accordion.Title>
    <Accordion.Content>
      <p>
        Three common ways for a prospective owner to acquire a dog is from pet shops,
        {' '}private owners, or shelters.
      </p>
      <p> A pet shop may be the most convenient way to buy a dog.
        {' '}Buying a dog from a private owner allows you to assess the pedigree and
        {' '}upbringing of your dog before choosing to take it home. Lastly, finding your dog
        {' '}from a shelter, helps give a good home to a dog who may not find one so readily.
      </p>
    </Accordion.Content>
  </Accordion>
)

export default AccordionExampleStandard

Expected Result

The user should see an Accordion with content expanding in and out such as the one here: https://semantic-ui.com/modules/accordion.html

Actual Result

Accordion content does not animate and instead is immediately visible or hidden.

Version

0.73.1

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:53
  • Comments:27 (6 by maintainers)

github_iconTop GitHub Comments

22reactions
balramsinghindiacommented, Jan 19, 2018

@levithomason Any idea when is this going to implement?

20reactions
Maxhodgescommented, Jan 20, 2018

@balramsinghindia maybe vote up the OP above

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use transition effect on accordion - Stack Overflow
For the best effect you'll need to transition the max-height from 0px to the height of the content and vice versa. You'll need...
Read more >
Pure CSS Accordion: Adding A Transition Effect - YouTube
How To Make Accordion Design Using HTML And CSS Step By Step · Easy React Native Accordion Menu with Reanimated Transition API ·...
Read more >
Easy React Native Accordion Menu with Reanimated ...
In this video tutorial we'll learn how to create an accordion animation in React Native using Transition API from React Native Reanimated ...
Read more >
Build a React Accordion Component from Scratch Using ...
accordion __content , you can tweak the animation by changing the transition property on the .accordion__icon class in your Accordion.css file.
Read more >
Accessible Accordion - examples and best practices - Aditus
Accordions are a common UX pattern that can help reduce the amount of information presented to users. You might recognise this pattern by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found