Tengo una estructura similar a un acordeón pero para pestañas en un menú.

Cada pestaña tiene una flecha que se mueve hacia arriba y hacia abajo dependiendo de si la pestaña está expandida o condensada.

Mi código:

 export default class Tab extends Component<TabProps> { tabRef: any; arrowRef: any; clickFunction: any; constructor(props: any) { super(props); this.tabRef = React.createRef(); this.arrowRef = React.createRef(); this.clickFunction = this.expand.bind(this); } expand() { this.arrowRef.current.style.animation = '0.3s rotateArrowDown ease-in-out forwards'; this.clickFunction = this.condense.bind(this); } condense() { this.arrowRef.current.style.animation = '0.3s rotateArrowUp ease-in-out forwards'; this.clickFunction = this.expand.bind(this); } render() { const num = this.props.num; const desc = this.props.desc; const parts = this.props.parts; var subTabs = []; for(let i = 1; i <= parts.length; i++) { subTabs.push(<a className="sub-tab" href={parts[i - 1].link}> <span className="sub-tab-desc">{parts[i - 1].desc}</span> </a>) } return ( <div className="menu-tab" ref={this.tabRef} onClick={this.clickFunction}> <div className="tab-title"> <div className="tab-arrow" ref={this.arrowRef}></div> <div className="tab-num">{num}</div> <div className="tab-desc">{desc}</div> </div> <div className="sub-tabs"> {subTabs} </div> </div> ); } };

Pero esto no funciona.

¿Hay alguna forma de hacer esto?