Accepted answer

You are editing the className attribute of the .arrow dom node directly via $target.toggleClass('up down');, but not the props of the ReactComponent that spawned it.

In your code, arrow is a ReactComponent, not a DOM Node. To find the DOM Node of a ReactComponent, use React.findDOMNode(component).

The React way would be to ditch jQuery for such a trivial task and instead update your component state with a flag that indicates if the accordion is active.

getInitialState: function() {
  return {
    accordionActive: false

toggleFooter: function(e) {
    accordionActive: !this.state.accordionActive

render: function() {
  return (
      <ul className={'project-accordion' + (this.state.accordionActive ? ' active' : '')}>
        {, i){
          return <AccordionStep step={step} key={i}/>
      <span className="footer-info">{this.props.completedSteps} of {this.props.totalSteps} steps completed</span>
      <span className={'arrow mt1 ' + (this.state.accordionActive ? 'up' : 'down')} onClick={this.toggleFooter}></span>

Using the classNames module, you can replace those ugly className computation with

className={classNames('project-accordion', this.state.accordionActive && 'active')}


className={classNames('arrow mt1', this.state.accordionActive ? 'up' : 'down')}

The value of arrow.props.className should then always be either arrow mt1 up or arrow mt1 down.

Related Query

More Query from same tag