How to add buttons on the header of bootstrap accordian in such a way that clicking it that wont collapse or expand it?

user_12525464 0
Viewed 331

Here I added 2 buttons on the header of the accordian, but when I click the button the entire accordian collapses or expands. Is there a way to add buttons to it in such a way that clicking them won't collapse or expand the accordion?

<div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
            aria-controls="panelsStayOpen-collapseTwo">
            <div>26-08-21</div>
            <div style="margin-left: -20px;" class="col-1"></div>
            <div>project_id</div>
            <div class="col-3"></div>
            <div>title</div>
            <div class="col-3"></div>
        </button>
        <button type="button" class="btn btn-sm  btn-success">
            <em class="far fa-edit"></em>&nbsp;&nbsp;Edit
        </button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-sm btn-danger">
            <i class="far fa-trash-alt"></i>&nbsp;&nbsp;Delete
        </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
        aria-labelledby="panelsStayOpen-headingTwo">
        <div class="accordion-body">
            <br>
            <button style="margin-left: 20px;" type="button" class="btn btn-sm btn-outline-primary">Download CSV</button>
        </div>
    </div>
</div>
bootstrap-5 bootstrap-4 html
1 Answers

With the on click of buttons, you need to use $event.stopPropagation()

public onButtonClick($event): void {
    // Do something on click
    $event.stopPropagation()
}
user_96183780
Related