Prevent Collapse after click on a specific tag on the header

Michał Duszak staff commented 3 years ago

Your snippet gives me 404. Could you send a new one?

Michał Duszak staff commented 3 years ago

Your snippet gives me 404. Could you send a new one?

Anas Qiblawi commented 3 years ago

New Snippet

https://mdbootstrap.com/snippets/standard/anas_qiblawi/3329443

Description

When I click on "+ add new" a modal will appear

but every time I click on it, the collapse also changes to open or close, and I don't know how to avoid it.

Code

<!-- container -->
<div class=" container card d-flex flex-column justify-content-start mt-5 mb-3 p-0 shadow-4 rounded-5 overflow-hidden ">
  <!-- Settings Accordion -->
  <div class="accordion" id="SettingsAccordion">
    <!-- Schedule Collapse -->
    <div class="accordion-item">
      <!--Schedule Header-->
      <h2 class="accordion-header" id="headingFour">
        <button class="accordion-button collapsed" type="button" data-mdb-toggle="collapse" data-mdb-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          <i class="fas fa-stopwatch fa-sm pe-2"></i> Schedule
          <!-- Schedule - Add New - Modal -->
          <a href="#" class="ps-2 small" data-mdb-toggle="modal" data-mdb-target="#ScheduleAddNew">+ Add New</a>
        </button>
      </h2>
      <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-mdb-parent="#SettingsAccordion">
        <!--Schedule Body-->
        <div class="accordion-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item"> Schedule <a href="" class="float-end">Edit</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--Schedule Collapse-->
  </div>
  <!--Settings Accordion-->
</div>
<!--container-->