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.)

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


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.


<!-- 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>
      <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>
    <!--Schedule Collapse-->
  <!--Settings Accordion-->

Ray7 free answered 1 year ago


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 1 year 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

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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