why my css transition is not working in react 18

I tried many times to add a transition to eventBody, but it still not working.

**here’s the code:

export function Event({ event }: EventProps) {
  const [showDropDown, setShowDropDown] = useState(false)

  return (
    <div className={styles.eventContainer}>
      <div
        className={styles.eventHeader}
        onClick={() => setShowDropDown(!showDropDown)}
        role='button'
      >
        <div className={styles.eventInfo}>
          <div className={styles.eventTitle}>{event.title}</div>
          <div className={styles.eventTime}>{event.time}</div>
          <div className={styles.eventLocation}>{event.location}</div>
        </div>

        <div className={styles.chevronContainer}>
          <Icon
            name={IconName.chevron}
            iconProps={{
              className: `${styles.chevron} ${showDropDown ? styles.openedChevron : ''}`,
              alt: 'Chevron icon',
            }}
          />
        </div>
      </div>
      <div className={styles.eventBody} hidden={!showDropDown}>
        <div className={styles.line}></div>
        <AttendeeList upcoming={true} attenders={attenders}></AttendeeList>
      </div>
    </div>
  )
}

**CSS:

.eventBody {
  transition: all 0.4s ease-out;
}

.eventBody[hidden='true'] {
  display: none;
}

i tired to setShowDropDown after 100 ms second on every click on the header div, and also tried to use height in transition instead of all but nothing worked

>Solution :

Your css selector is wrong. Also, display is not an animatable property.

.eventBody {
  transition: all 0.4s ease-out;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.eventBody[hidden] {
  height: 0;
}