bootstrap nested panel collapse toggle without IDs

Question

I'm not sure if what I'm trying to do is even possible but here it is.

I'm using bootstrap 3.3.7 I'm also working in TFS There are blocks of code generated by clicking on items like "add user" or "block user" or "temporary user"

These get added depending on each persons user accounts and what they have in there. So on that note. I cannot have ID="unique_name" because the auto generated code wouldn't know how to handle this.

these are examples I have been playing with.

NO IDS but not working http://jsfiddle.net/misschohoh/10wk860x/2/

$('.panel-collapse').collapse({toggle: false});
$('body').on('click', '[data-toggle=collapse-next]', function (e) {
e.preventDefault();

// Try to close all of the collapse areas first
var parent_id = $(this).data('parent');
$(parent_id+' .panel-collapse').collapse('hide');

// ...then open just the one we want
var $target = $(this).parents('.panel').find('.panel-collapse');
$target.collapse('toggle');
});

with IDS and working http://jsfiddle.net/misschohoh/56gwtpdm/

 <!-- Here we insert another nested accordion -->

      <div class="panel-group" id="accordion2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne"> Collapsible Inner Group Item #1 </a></h4>
          </div>
          <div id="collapseInnerOne" class="panel-collapse collapse in">
            <div class="panel-body"> Anim pariatur cliche... </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo"> Collapsible Inner Group Item #2 </a></h4>
          </div>
          <div id="collapseInnerTwo" class="panel-collapse collapse">
            <div class="panel-body"> Anim pariatur cliche... </div>
          </div>
        </div>
      </div>

      <!-- Inner accordion ends here --> 

THIS IS WHAT I'M TRYING TO DO

but I can't figure out how to it without having IDs defined for each panel-collapse

with IDS and working and functions right with nested panels https://www.bootply.com/vlLkd53dZb

Does anyone know if this is possible and can someone point me in the direction of getting this to work please.

Thanks!

Answer 1

I had to unbind then bind the panels, and stop propagation.

 $('#chevronVisitors').unbind('click').on("click", function (e) {
    e.stopImmediatePropagation();