CODEWITHSUNDEEP
semantic-ui-react
TomJ
TomJ

Reputation: 3

How to expand/collapse on partial title when using the semantic-ui-react accordion

I have an accordion title that consists of the carat, some text, and a div with some other stuff. I want the accordion to only expand when the user clicks the carat or the text, but not the extra div. Clicking on the div will do something else entirely.

I noticed that in the base Semantic-UI, you can specify a CSS selector to trigger on, but that seems JQuery specific and not doable in the react version.

Is this possible?

<Accordion.Title
   active={activeIndex === 0} index={0} onClick={this.handleClick}
>
  <Icon name="dropdown" />
  <span className="name">{data.name}</span>
  <div>some extra junk - don't expand on this</div>
</Accordion.Title>

Upvotes: 0

Views: 1250

Answers (1)

brianespinosa
brianespinosa

Reputation: 2408

Your onClick event is attached to the Accordion.Title itself. That means when you click that component, your handleClick function will fire. If you want the handleClick function to fire when clicking the Icon then you need to move your handler function to that component instead.

<Icon 
  name='dropdown'
  onClick={this.handleClick}
/>

Upvotes: 1

Related Questions