dynamic thymeleaf list as dropdown

Question

Sorry, my knowledge in this section is so bad... maybe it's a simple thing. I build a dynamic list with thymeleaf like this (this works): html/thymeleaf code (code is also at the end of the post)

So how is it possible (is it possible at all) to make every single list entry as a clickble "line" and when I click on one it should show the detail content of the list entry below (like a drop-down). The details for each entry is an other dynamic list. The first click open, second close the details. By the way... I don't use JQuery just JS, java, html, css and thymeleaf.

<body>
  <table>
    <tr>
      <th>Phasen Name</th>
      <th>PC</th>
      <th>AC</th>
      <th>EV</th>
    </tr>
    <tr th:each="Projectphase : ${evaPhasen}">
      <td th:text="${Projectphase.getphasenname()}"></td>
      <td th:text="${Projectphase.getplannedValue()}"></td>
      <td th:text="${Projectphase.getactualCost()}"></td>
      <td th:text="${Projectphase.getearnedValue()}"></td>
    </tr>
  </table>
</body>

Thx for your help and answers! Manuel

Answer 1

My understanding is that you are trying to implement an accordion , this need a bit of javascript.

Main idea is : toggling displaying of a detail row which is below the current row ( display : none <-> display : table-row ). This is done with an EventListener attached to the first td of each row ( class='accordion' ).

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { console.log(this.parentElement.nextElementSibling) /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.parentElement.nextElementSibling; if (panel.style.display === "table-row") { panel.style.display = "none"; } else { panel.style.display = "table-row"; } }); }

 table { border-collapse : collapse; } td, th { border : 1px solid black }

 <table> <tr> <th>Phasen Name</th> <th>PC</th> <th>AC</th> <th>EV</th> </tr> <tr> <td class="accordion">Phasename 1 (See Details)</td> <td>PC1</td> <td>AC1</td> <td>EV1</td> </tr> <tr style="display:none"><td colspan="4">Here are the details 1</td></tr> <tr> <td class="accordion">Phasename 2 (See Details)</td> <td>PC2</td> <td>AC2</td> <td>EV2</td> </tr> <tr style="display:none"><td colspan="4">Here are the details 2</td></tr> </table>

Note that with Thymeleaf, the static HTML (written to give you a runnable snippet) would be replaced by :

<table>
  <tr>
    <th>Phasen Name</th>
    <th>PC</th>
    <th>AC</th>
    <th>EV</th>
  </tr>
  <th:block th:each="Projectphase : ${evaPhasen}"
    <tr>
      <td class="accordion" th:text="${Projectphase.getphasenname()} (see details)"></td>
      <td th:text="${Projectphase.getphasenname()}"></td>
      <td th:text="${Projectphase.getplannedValue()}"></td>
      <td th:text="${Projectphase.getactualCost()}"></td>
      <td th:text="${Projectphase.getearnedValue()}"></td>
    </tr>
    <tr style="display:none"><td colspan="4">Here are the details 1</td></tr>
  </th:block>
</table>

Note the use of th:block to get 2 <tr> for a single ProjectPhase (see : th:block Thymeleaf documentation )

Accordion largely inspired from w3schools

dynamic thymeleaf list as dropdown

Question

1 answers

solution1
0 ACCPTED 2018-05-23 13:27:15

dynamic thymeleaf list as dropdown

Question

1 answers

solution1 0 ACCPTED 2018-05-23 13:27:15

solution1
0 ACCPTED 2018-05-23 13:27:15