title: Clicking text inside data-bs-toggle="collapse" scrolls down to children when clicking on text
body: <p>I have made a minimal snippet here, which loads Bootstrap 5 (CSS and Bundle) from CDN.</p>
  <p>This regards a collapsable navbar header, which produces unwanted scrolling behavior.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
          &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body id="page-top"&gt;
  
      &lt;!-- Page Wrapper --&gt;
      &lt;div id="wrapper"&gt;
  
          &lt;!-- Sidebar --&gt;
          &lt;ul class="navbar-nav" id="accordionSidebar"&gt;
  
              &lt;!-- Nav Item - Pages Collapse Menu --&gt;
              &lt;li class="nav-item" style="border: 3px solid red"&gt;
                  &lt;a class="nav-link collapsed" href="#collapseTwo" data-bs-toggle="collapse" 
                      aria-expanded="true" aria-controls="collapseTwo" style="border: 6px solid green"&gt;
                      &lt;span style="border: 9px solid purple"&gt;Collapsable header&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar"&gt;
                      &lt;div class="py-2 rounded"&gt;
                          &lt;h6 class="collapse-header"&gt;Subitems&lt;/h6&gt;
                          &lt;a class="collapse-item" href="ZZZZZ-subitem-1.html"&gt;Sub-item 1&lt;/a&gt;
                          &lt;a class="collapse-item" href="ZZZZZ-subitem-2.html"&gt;Sub-item 1&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;!-- End of Sidebar --&gt;
  
          &lt;!-- Content Wrapper --&gt;
          &lt;div id="content-wrapper" class="d-flex flex-column"&gt;
  
              &lt;!-- Main Content --&gt;
              &lt;div id="content"&gt;
  
                  &lt;!-- Begin Page Content --&gt;
                  &lt;div class="container-fluid"&gt;
  
                      &lt;!-- Content Row --&gt;
                      &lt;div class="row"&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
  ABC&lt;/br&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;!-- /.container-fluid --&gt;
  
              &lt;/div&gt;
              &lt;!-- End of Main Content --&gt;
  
      &lt;!-- Bootstrap core JavaScript--&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <h1>Great</h1>
  <p>When you click within the <strong>green rectangle</strong>, the behavior is as wanted. There is no scroll happening when one clicks the green item. Which is great, because the end-purpose is to use this in a side-bar. It's just a collapsable header of a sidebar, which then shows the sub-items.</p>
  <h1>Not great</h1>
  <p>However, if one clicks on the text itself (the <strong>purple rectangle</strong>) then scrolling behaviour is happening. This is unwanted. How to prevent this please?</p>