score:1

Accepted answer
class Accordion extends React.Component {
  state = {
    active: '',
    height: '0px',
  }

  content = React.createRef(null);

  toggleAccordion = () => {
    this.setState({
      active: this.state.active === "" ? "active" : "non-active",
      height: this.state.active === "active" ? "0px" : `${this.content.current.scrollHeight}px`
    })
  }

  render() {
    return (
        <div className="accordion__section">
        <button className={`accordion ${this.state.active}`} onClick={this.toggleAccordion}>
          <div className="accordion__title"
          dangerouslySetInnerHTML={{ __html: this.props.title }}
          />
        </button>
        <div ref={content} style={{ maxHeight: this.state.height }}  className="accordion__content">
          <div
            className="accordion__text"
            dangerouslySetInnerHTML={{ __html: this.props.content }}
          />
        </div>
      </div>
    )
  }
}

Related Query

More Query from same tag