Bootstrap Accordion Suppress Open

Question

I've got this jQuery, which is obviously not working:

$('input.descriptionLC').click(function(){
    $('.collapse').collapse('hide')
});

My html is being generated by this for loop / append:

for (i=0; i < nodeArr.length; i++){
  $('#accordion2').append('<div class="accordion-group">' +
  '<div class="accordion-heading">' +
    '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse' + i + '">' +  
        '<hr class="inLC">' +
        '<div class="divLC">' +
            '<p class="titleLC">' + nodeArr[i][0] + '</p>' +
            '<p class="imgWrap"><img class="imgLC" src="img/On_slider.png"></p>' +
            '<input type="text" class="descriptionLC" id="description' + i + '">' +
        '</div>' +    
    '</a>' +
  '</div>' +
  '<div id="collapse' + i + '" class="accordion-body collapse">' +
    '<div class="accordion-inner">' +
      'Anim pariatur cliche...' +
    '</div>' +
  '</div>' +
  '</div>'
  );
}

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

You want to use .on instead of .click as your DOM is changing.

See this answer. .on will (and should) be used to watch the parent of the changing area for changes; once the changes have been executed it will automatically rebind all of the events to the selected subelements (with the filter). In that answer I give a more detailed description of how to use it.

In short, though this is inefficient (you should change body to some div containing just the changing part of the DOM):

$('body').on("click", 'input.descriptionLC', function(e){
      $('.collapse').collapse('hide')
});

if you want just the following accordion item:

$('body').on("click", 'input.descriptionLC', function(e){
      $(this).next('.collapse').collapse('hide')
});

edited May 23 '17 at 12:11

Community

1
1

answered Mar 07 '13 at 16:37

Christian Stewart

15,217
20
82
139

I don't know why, but for some reason, this opens all the accordions on the page, 30+. – dezman Mar 07 '13 at 16:42
Yes, this will open all of the documents, as you're selecting .collapse for the entire page. If you want just the next one... editing answer – Christian Stewart Mar 07 '13 at 16:42
?? I want to make none of them open. – dezman Mar 07 '13 at 16:44
Your question contains code that is obviously meant to open when clicking the thing. If you want to UNBIND that, you can use `$('input.descriptionLC').unbind()` – Christian Stewart Mar 07 '13 at 16:45
Someone edited my title, but the whole point was to make none of them open when the input is active. – dezman Mar 07 '13 at 17:06

score 0 · Answer 2 · answered Mar 07 '13 at 16:38

0

Jquery

$('body').on('click', 'input.descriptionLC', function(e){
    $('.collapse').collapse('hide');
});

See jQuery on docs

answered Mar 07 '13 at 16:38

soyuka

8,839
3
39
54

Really ? I thought it was replacing the live event like that ? – soyuka Mar 07 '13 at 16:40
No, they replaced all of those old events using .on – Christian Stewart Mar 07 '13 at 16:40
so I should better bind the 'body' instead of the document ? Thanks for that ! – soyuka Mar 07 '13 at 16:41
Actually you linked to the jquery docs for on anyway, you shouldn't bind to document, rather body or even better the closest containing div to the changing DOM. – Christian Stewart Mar 07 '13 at 16:41
For example if the changing div was surrounded by .container, you should use $('.container'). ... – Christian Stewart Mar 07 '13 at 16:41
ok, but does it bind the events on something that is added with Javascript to the container ? – soyuka Mar 07 '13 at 16:43
No, not at all. jQuery will simply look for clicks within that area. Much more efficient than clicks on the entire page (and actually anywhere in the window) – Christian Stewart Mar 07 '13 at 16:44
Thanks for those informations, I was able to illustrate it [there](http://jsfiddle.net/soyuka/N3hEq/). – soyuka Mar 07 '13 at 16:51

Bootstrap Accordion Suppress Open

2 Answers2