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

<p><strong>New Snippet</strong></p>

<p><a href="https://mdbootstrap.com/snippets/standard/anas_qiblawi/3329443" target="_blank">https://mdbootstrap.com/snippets/standard/anas_qiblawi/3329443</a></p>

<p><strong>Description</strong></p>

<p>When I click on "+ add new"
a modal will appear</p>

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

<pre class="prettyprint"><code>
<div class=" container card d-flex flex-column justify-content-start mt-5 mb-3 p-0 shadow-4 rounded-5 overflow-hidden ">
  
  <div class="accordion" id="SettingsAccordion">
    
    <div class="accordion-item">
      
      <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
          
          <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">
        
        <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>
    
  </div>
  
</div>

</code></pre>

Please insert min. 15 characters.

Add comment

Ray7 free answered 1 year ago