CODEWITHSUNDEEP
jquerytwitter-bootstrap
chris
chris

Reputation: 4867

Prevent Bootstrap collapse from collapsing

I have a Bootstrap collapse with a button inside the header. On the button is clickEvent.

I want to prevent the collapseEvent when clicking the button. Does anyone have a tip?

This does not help here

$('#buttonId').live("click", function (e) {
    e.preventDefault();   
    // some action ...
});

Is there a way to prevent the default collapse action?

Upvotes: 10

Views: 18527

Answers (3)

Gedanggoreng
Gedanggoreng

Reputation: 321

I just encountered the same issue.

In case somebody needs to solve it using proper JavaScript, you can use the code below.

It precisely focuses on the anchor tag, avoiding any disruption to the default collapse events of the Bootstrap Accordion.

As stated on the official Bootstrap documentation here, to render an accordion that expanded, we need to add the .show class on the .accordion-collapse element, drop the .collapsed class from the .accordion-button element and set its aria-expanded attribute to true.

HTML

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<!--    <a href="javascript:void(0);" onclick="handleAccordionClick('https://www.google.com/')">GOOGLE</a> -->
        <a href="https://www.google.com/" target="_blank">GOOGLE</a>
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample" style="">
      <div class="accordion-body">
        <strong>This is the item's accordion body.</strong>
      </div>
    </div>
  </div>
</div>

JavaScript

function handleAccordionClick(url) {
    // Navigate to the specified URL
    window.open(url, "_blank");
}
var accordionButtons = document.querySelectorAll(".accordion-button");
for (var i = 0; i < accordionButtons.length; i++) {
    var anchorTag = accordionButtons[i].querySelector('a');
    anchorTag.addEventListener('click', function(event) {
        event.stopPropagation();
        var currentAccordionButton = this.parentElement;
        var ariaControls = currentAccordionButton.getAttribute("aria-controls");
        // var headerAccordion = currentAccordionButton.parentElement;
        // var containerAccordion = headerAccordion.parentElement;
        // var accordionDiv = containerAccordion.querySelector("#" + ariaControls);
        var accordionDiv = document.querySelector("#" + ariaControls);
        accordionDiv.classList.add("show");
        currentAccordionButton.setAttribute("aria-expanded", "true");
        currentAccordionButton.classList.remove("collapsed");
    });
}

Upvotes: 0

ejectamenta
ejectamenta

Reputation: 1097

StopPropagation(), PreventDefault() don't stop the event from reaching the accordion button. You need to set/unset the collapse property like so:

(this I do in mouse down & cancel)

$("button.accordion-button").attr("data-bs-toggle", "collapse");

(this I do in mouse move, eg, if scrolling)

$("button.accordion-button").attr("data-bs-toggle", "non-collapsing");

collapse keeps the state of the accordion button eg. open/closed.

Example is for Bootstrap 5

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74410

I think you are looking for stopPropagation() method instead:

$('#buttonId').live("click", function (e) {
    e.stopPropagation();   
    // some action ...
});

If your button is a link (<a> tag ), you should prevent default too or use return false;

BTW, live is deprecated, you should use .on() delegation syntax instead, e.g:

$(document).on('click', '#buttonId', function(e){
    e.stopPropagation(); 
    // some action ...
});

Upvotes: 20

Related Questions