How to click on delete and add button and not trigger the accordion in React

JavaScript
1

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
444

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.

2

In your click handler you should check if clicked element is the icon and act accordingly.
Here’s basic example: https://codepen.io/jenovs/pen/JjXgpZW?editors=0010

3

Thanks for taking your time to answer this, i already tried this approach days ago, unfortunately it doesn’t help with UncontrolledCollapse (reactstrap), there is no state, it just takes an id for a toggler props, that’s how it shows content, you can see how it looks in my example.

4

Yeah, that complicates it a bit.
Rewrote my example to use CSS positioning.

5

Thanks, it wasn’t exactly the answer, but it led me into a right direction, separating toggler with icons did the trick. I had a similar idea, but i didn’t think of doing position:absolute.

Anyway, thanks man! great help, woudln’t have been able to do it without ya!
Btw also thanks for looking into UnctrolledCollapse just for me