The JavaScript examples often don’t make it clear what element a reference points to

[mwaibel-go]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Take the Events documentation in for Collapse as an instance. It shows how to bind to a JavaScript event like this:

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})

The docs don’t identify the element on which the event will be emitted – is it the trigger or the element that’s hidden?

I would suggest using the same markup throughout a page. That is, use the same identifiers in the “Events” and “Methods” sections that are used in the HTML snippet from the “Example” section.

Alternatively, you might use an ID that makes the referenced element clear, such as #my-collapse-trigger, or you simply state that events are emitted from and methods must be called on the trigger element. The “Navs and tabs” page does this well, as shown in this example:

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)
// <more>

The Modal page is better in this regard. It at least contains the HTML that would make the examples in the “Methods” and “Events” sections work, even though it’s (IMHO) sneakily provided under “Usage > Via data attributes > Toggle”.

Reduced test cases

(This template seems unsuitable for documentation bugs.)

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.3.0