Improve Docs for dropdown

[Kembreg1405]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

This page:

https://getbootstrap.com/docs/5.0/components/dropdowns/#via-javascript

Has this code:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

I found this code difficult to understand.
I request a simple explanation on how to show a dropdown by js or jquery.
It should be id based, not class based.
To open 1 dropdown, not all dropdowns.

Something along the lines:

To open a downdown using the item id, use this:

const dropdownIns = new bootstrap.Dropdown($('#myid').parent().prev());
dropdownIns.show();

or similar.

Motivation and context

The docs example is abstruse.

[julien-deramond]

The 5.3 documentation example is slighly different:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

Probably a little bit less difficult to understand than in 5.0. What do you think?

[Kembreg1405]

Julien, Thanks for writing.
Honestly, looks complicate for something that should be very simple.

The docs still refer to a class. What if there are two dropdowns? Better to refer to an id.

Stackoverflow had this example:

const dropdownIns = new bootstrap.Dropdown($('#dropdownlistitem').parent().prev());
dropdownIns.show();

But it did not work for me.