0

I have a Bootstrap Collapse element (SPAN) inside an onClick DIV, but if you click on that element, instead of collapsing the wanted content, it runs the onClick Function. Is there any way I can collapse the content when this element (SPAN) is clicked, and if you click anywhere else on that div, it should run the onClick Function.

Code:

<div width="100%" onclick="myFunction();">
    <span data-toggle="collapse" data-target="#collapse_content" aria-expanded="false" aria-controls="collapse_content"><i class="fas fa-caret-up fa-3x"></i></span>
    <div id="collapse_content" class="collapse">
        <div>
            <!-- COLLAPSED CONTENT -->
        </div>
    </div>
</div>

I MANAGE TO SOLVE THIS!

<div width="100%" class="parent-div">
    <span data-toggle="collapse" data-target="#collapse_content" aria-expanded="false" aria-controls="collapse_content"><i class="fas fa-caret-up fa-3x"></i></span>
    <div id="collapse_content" class="collapse">
        <div>
            <!-- COLLAPSED CONTENT -->
        </div>
    </div>
</div>

$(document).on("click", "div.parentDIV", function(event) {
    var senderElementName = event.target.tagName.toLowerCase();
    if (!(senderElementName === 'span') && !(senderElementName === 'i')) {
        console.log('SUCCESS');
    }
});

Reference: This Answer

Mateo Kurti
  • 77
  • 7
  • Does this answer your question? [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) – SuperStormer Apr 01 '20 at 19:34
  • @SuperStormer No, because I have to add e.stopPropagation(); to the child function, but the child function is a bootstrap function, which I can't edit. – Mateo Kurti Apr 01 '20 at 19:38
  • [See this answer](https://stackoverflow.com/a/29499060/7941251) – SuperStormer Apr 01 '20 at 19:39

0 Answers0