code: def tabs(tabs_dict: dict) -> str:
      """Generate a series of bootstrap tabs for a dictionary tabs_dict with the
      name of each tab as the dict key and the html contents of the tab as the dict value.
      """
      tabs_id = "myTab"
      html = f'<ul class="nav nav-tabs" id="{tabs_id}" role="tablist">'
      for i, tab_name in enumerate(tabs_dict.keys()):
          tab_id_name = f"{tabs_id}{i}"
          html += f"""
  <li class="nav-item" role="presentation">
      <button class="nav-link{'' if i else ' active'}" id="{tab_id_name}-tab"
      data-bs-toggle="tab" type="button" data-bs-target="#{tab_id_name}" role="tab"
      aria-selected="{'false' if i else 'true'}" aria-controls="{tab_id_name}">{tab_name}</button>
  </li>
  """
  
      html += """\n</ul>\n\n"""
      html += f"""<div class="tab-content" id="{tabs_id}Content">\n\n"""
  
      for i, (tab_name, tab_contents) in enumerate(tabs_dict.items()):
          tab_id_name = f"{tabs_id}{i}"
          html += f"""
  <div class="tab-pane {'' if i else 'active'}" id="{tab_id_name}"
       role="tabpanel" aria-labelledby="{tab_id_name}-tab"> {tab_contents}
  </div>
  """
      html += "\n</div>"
      # https://getbootstrap.com/docs/5.1/components/navs-tabs/#via-javascript
      html += f"""
  <script type="text/javascript">
  var triggerTabList = [].slice.call(document.querySelectorAll('#{tabs_id} button'))
  triggerTabList.forEach(function (triggerEl) {{
    var tabTrigger = new bootstrap.Tab(triggerEl)
  
    triggerEl.addEventListener('click', function (event) {{
      event.preventDefault()
      tabTrigger.show()
      window.dispatchEvent(new Event('resize'));
    }})
  }})
  </script>
  """
      return html
  
file_path: explainerdashboard/explainerdashboard/to_html.py
label_desc: Use image node_id 13 for calling a global function with example usage: tabs(tabs_dict) and returns: html