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

Anas Qiblawi free asked 2 years 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 2 years ago

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


Michał Duszak staff commented 2 years ago

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


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

Ray7 free answered 11 months ago


Hello,

Can you please help me with Custom javascript to keep expanded accordion open on onClick instead of collapsing?

Thanks Ray


Kamila Pieńkowska staff commented 11 months ago

Sorry, but can you explain more precisely what you want to do?


Michał Duszak staff answered 2 years 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 2 years 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 2 years 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

Answered

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