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 11 months 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 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

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

  • 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