phantom phantom - 2 months ago 6x
jQuery Question

Using jquery collapse dynamically

Here is the html part.Products list is displayed in pannel:

{% for product in pro %}
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">{{ product.item_name }}<br>{{ product.item_price }}
<div>{{ product.item_time_end }}</div>

<div class="panel-body"><img src="{{ product.item_image.url }}" class="img-rounded" alt="Cinque Terre" width="304" height="236"></div>
<div class="panel-footer"><button type="button" class="btn btn-success" id="myBtn">SUBMIT

<div class="collapse">




The thing is while the template renders ,all the items list pannels collapse at once ..How to collapse the individual items when clicked in the particular items.The thing is the button id is same for the loop .Need help.


Use $(this).next() to find the next sibling, which is the .collapse:

    $(this).next().collapse('show'); // this will work only if .collapse is the next sibling

Or use .siblings():

    $(this).siblings('.collapse').collapse('show'); // this will work only if .collapse is one of the siblings

Or use .parent() to go up one level, and then search for .collapse if it's not the next sibling:


In addition note that I use .myBtn, since #myBtn should be unique:

<button type="button" class="btn btn-success myBtn">