Prevent Collapse after click on a specific tag on the header


Topic: Prevent Collapse after click on a specific tag on the header

Anas Qiblawi free asked 11 months ago

Expected behavior

When I click on "+ add new" collapse should not change its status.


Actual behavior

if I click anywhere on the collapse header the collapse change its status


Resources (screenshots, code snippets etc.)

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



Michał Duszak staff commented 10 months ago

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


Michał Duszak staff commented 10 months ago

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


Anas Qiblawi free commented 10 months 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-->

Michał Duszak staff answered 10 months ago

It's not a good idea to place an <a> element inside a <button>, because the <button> element is responsible for the collapse.


Anas Qiblawi free commented 10 months ago

I know, but my question is that how can I place something on the accordion header and when I click on it, it won't triggering the collapse


Michał Duszak staff commented 10 months ago

In the header, outside of the button https://mdbootstrap.com/snippets/standard/m-duszak/3335978


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: ALL
  • Browser: ALL
  • OS: ALL
  • Provided sample code: No
  • Provided link: Yes