Implementing an Accordion Feature in Jira via Velocity Template

Other Questions Jira
1

Trying to integrate a collapsible section in a Jira info panel using a Velocity template accordion. My current solution isn’t functioning as expected.

<button class="toggle-btn">Group One</button>
<div class="toggle-content">
  <p>Details for Group One.</p>
</div>
<button class="toggle-btn">Group Two</button>
<div class="toggle-content">
  <p>Details for Group Two.</p>
</div>
<script>
  const btns = document.querySelectorAll('.toggle-btn');
  btns.forEach(button => {
    button.addEventListener('click', () => {
      const contentDiv = button.nextElementSibling;
      contentDiv.style.display = contentDiv.style.display === 'block' ? 'none' : 'block';
    });
  });
</script>
2

I experienced similar issues when embedding interactive elements in a Jira info panel. The code you provided appears logically correct and the toggle functionality works in a local environment. However, in Jira, I’ve found that the Velocity template can load your HTML and script before the DOM is fully ready, causing inconsistencies. In my case, wrapping the code in a document ready or DOMContentLoaded event helped. Also, make sure that no conflicting styles or repeated IDs are affecting the display. Adjusting the script load timing usually resolves these problems.