Greetings, tell me, please, is there a way to accomplish the following task:

Task: there is a list of items (payments in the system, their number is not known in advance), it is updated / added automatically by payment. When you click on the item, an "accordion" should fall out with detailed information about the payment.

Problem: when you click on any existing payment, the first and only the first element from the entire list opens ... if, I understand correctly, then each element for opening should have a unique id ... this syntax is not correct.

Use: Thymleaf, Bootstrap

<tr th:each="pay: ${pays}"> <td colspan="7"> <table> <tr> <td><a href="#" data-toggle="collapse" data-target="#${pay.id}" class="clickable glyphicon glyphicon-chevron-right"></a>

or is it solved in a completely different way?

    1 answer 1

    For each accordion you need a unique identifier. This identifier is recorded in the data-parent for each panel of this accordion.

    But, if I correctly understood your task, you need not accordions, but simply folding panels .

    However, they also need unique identifiers. They are written in href and aria-controls . For example:

     <tr th:each="pay: ${pays}"> <td colspan="7"> <table> <tr> <td><a href="#${pay.id}" data-toggle="collapse" class="clickable glyphicon glyphicon-chevron-right" aria-expanded="false" aria-controls="${pay.id}"></a> <div class="collapse" id="${pay.id}"> <div class="well"> ... </div> </div>
    • Yes, I think they are more suitable ... Thank you very much) - andy