How to click on icons in UncontrollableCollapse in reactstrap and not trigger collapse?

Question

I have an accordion, when you click on it the content drops, all works well, but the problem is, i have a delete and an add button, i want to click them and not trigger the accordion. How can i accomplish that? I use UncontrolledCollapse from reactstrap and it has a toggler which is an id of an element.

<ul>
  <li id={`toggle-catalog-item-${item.id}`}
  >
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div>+</div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>

Here is an image

All of this grayish background is my <li></li> that has an id toggler that will toggle the UncontrolledCollapse that will show all the nested items.

I can achieve it by making only the <a></a>to have a toggle id, the problem is, i want to click on spaces between the icons and have the content drop. So what i want is to only have icons act as a non-toggler I tried doing it by applying z-index:100 to icons div but it doesnt work.

Answer 1

Got my answer! just move toggler from the li tag to a div and give position:absolute to icons

I changed it from this to

<ul>
  <li id={`toggle-catalog-item-${item.id}`}
  >
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div>+</div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>

to this

<ul>
  <li style={{position:'relative''}}
  >
//Add div
<div id={`toggle-catalog-item-${item.id}`}>
    <a>
      Some Accordion
    </a>
</div>
//Add position:absolute
    <div className="icons" style={{position:'absolute', bottom:0, left:0}}>
      <div>+</div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>

Answer 2

This would be a good case to use the controlled collapse. This way you can control when to toggle the accordion. In my example below, pay attention to my usage of stopPropagation

const [isOpen, setIsOpen] = React.useState(false);

const toggle = () => setIsOpen(!isOpen);

<ul>
  <li id={`toggle-catalog-item-${item.id}`} onClick={toggle}>
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div onClick={e => e.stopPropagation()}>+</div>
      <div onClick={e => e.stopPropagation()}><TrashIcon /></div>
    </div>
  </li>
  <Collapse
    isOpen={isOpen}
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    Menu Item Children
  </Collapse>
</ul>